大廠面經(jīng)大全大廠內(nèi)推 ?

CORS 通過控制 Access-Control-Allow-Origin 控制哪些域名可以共享資" />

国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

18143453325 或 在線咨詢 在線咨詢
18143453325 或 在線咨詢
所在位置： 首頁 > 營銷資訊 > 建站知識 > 一道頭條面試題：如何給 CORS 設(shè)置多域名

一道頭條面試題：如何給 CORS 設(shè)置多域名

時間：2023-02-07 19:16:01 | 來源：建站知識

時間：2023-02-07 19:16:01 來源：建站知識

? 本文收錄于 GitHub 日問: DailyQuestion，內(nèi)含大廠內(nèi)推機會、面經(jīng)大全及若干面試題，每天學習五分鐘，一年進入大廠中。
?

CORS 通過控制 Access-Control-Allow-Origin 控制哪些域名可以共享資源，取值如下

Access-Control-Allow-Origin: <origin> | *其中 * 代表所有域名，origin 代表指定特定域名，那如何設(shè)置多個域名了？

此時需要通過代碼實現(xiàn)，「根據(jù)請求頭中的 Origin 來設(shè)置響應(yīng)頭 Access-Control-Allow-Origin」，那 Origin 又是什么東西？

請求頭: Origin

并不是所有請求都會自動帶上 Origin，在瀏覽器中帶 Origin 的邏輯如下

  1. 如果存在跨域，則帶上 Origin，值為當前域名
  2. 如果不存在跨域，則不帶 Origin
邏輯理清楚后，關(guān)于服務(wù)器中對于 Access-Control-Allow-Origin 設(shè)置多域名的邏輯也很清晰了

  1. 如果請求頭不帶有 Origin，證明未跨域，則不作任何處理
  2. 如果請求頭帶有 Origin，證明跨域，根據(jù) Origin 設(shè)置相應(yīng)的 Access-Control-Allow-Origin: <Origin>
使用偽代碼實現(xiàn)如下:

// 獲取 Origin 請求頭const requestOrigin = ctx.get('Origin');// 如果沒有，則跳過if (!requestOrigin) { return await next();}// 設(shè)置響應(yīng)頭ctx.set('Access-Control-Allow-Origin', requestOrigin)

Vary: Origin

此時可以給多個域名控制 CORS，但此時假設(shè)有兩個域名訪問 static.shanyue.tech 的跨域資源

  1. foo.shanyue.tech，響應(yīng)頭中返回 Access-Control-Allow-Origin: foo.shanyue.tech
  2. bar.shanyue.tech，響應(yīng)頭中返回 Access-Control-Allow-Origin: bar.shanyue.tech
看起來一切正常，但如果中間有緩存怎么辦？

  1. foo.shanyue.tech，響應(yīng)頭中返回 Access-Control-Allow-Origin: foo.shanyue.tech，被 CDN 緩存
  2. 「bar.shanyue.tech，因由緩存，響應(yīng)頭中返回 Access-Control-Allow-Origin: foo.shanyue.tech，跨域出現(xiàn)問題」
此時，Vary: Origin 就上場了，代表為不同的 Origin 緩存不同的資源

總結(jié) (簡要答案)

CORS 如何指定多個域名？

「根據(jù)請求頭中的 Origin 來設(shè)置響應(yīng)頭 Access-Control-Allow-Origin」，思路如下

  1. 總是設(shè)置 Vary: Origin，避免 CDN 緩存破壞 CORS 配置
  2. 如果請求頭不帶有 Origin，證明未跨域，則不作任何處理
  3. 如果請求頭帶有 Origin，證明瀏覽器訪問跨域，根據(jù) Origin 設(shè)置相應(yīng)的 Access-Control-Allow-Origin: <Origin>
使用偽代碼實現(xiàn)如下

// 獲取 Origin 請求頭const requestOrigin = ctx.get('Origin');ctx.set('Vary', 'Origin')// 如果沒有，則跳過if (!requestOrigin) { return await next();}// 設(shè)置響應(yīng)頭ctx.set('Access-Control-Allow-Origin', requestOrigin)
? 相關(guān)問題：如何避免 CDN 為 PC 端緩存移動端頁面
?

更多面試

關(guān)注我

我是山月，正致力于「每天用五分鐘能夠看完的簡短答案回答一個大廠高頻面試題」。掃碼添加我的微信，備注進群，加入高級前端進階群.



關(guān)鍵詞：設(shè)置,試題

74
73
25
news

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果，本站不支持IE9及以下版本的瀏覽器，建議您使用谷歌Chrome瀏覽器。 點擊下載Chrome瀏覽器
關(guān)閉