一道頭條面試題：如何給 cors 設置多域名

本文收錄於 GitHub 日問: DailyQuestion，內含大廠內推機會、面經大全及若干面試題，天天學習五分鐘，一年進入大廠中。

• 大廠面經大全
• 大廠內推

CORS 經過控制 Access-Control-Allow-Origin 控制哪些域名能夠共享資源，取值以下

Access-Control-Allow-Origin: <origin> | *

其中 * 表明全部域名，origin 表明指定特定域名，那如何設置多個域名了？

此時須要經過代碼實現，根據請求頭中的 Origin 來設置響應頭 Access-Control-Allow-Origin，那 Origin 又是什麼東西？

請求頭: Origin

並非全部請求都會自動帶上 Origin，在瀏覽器中帶 Origin 的邏輯以下

1. 若是存在跨域，則帶上 Origin，值爲當前域名
2. 若是不存在跨域，則不帶 Origin

邏輯理清楚後，關於服務器中對於 Access-Control-Allow-Origin 設置多域名的邏輯也很清晰了

1. 若是請求頭不帶有 Origin，證實未跨域，則不做任何處理
2. 若是請求頭帶有 Origin，證實跨域，根據 Origin 設置相應的 Access-Control-Allow-Origin: <Origin>

使用僞代碼實現以下:

// 獲取 Origin 請求頭
const requestOrigin = ctx.get('Origin');

// 若是沒有，則跳過
if (!requestOrigin) {
  return await next();
}

// 設置響應頭
ctx.set('Access-Control-Allow-Origin', requestOrigin)

Vary: Origin

此時能夠給多個域名控制 CORS，但此時假設有兩個域名訪問 static.shanyue.tech 的跨域資源

1. foo.shanyue.tech，響應頭中返回 Access-Control-Allow-Origin: foo.shanyue.tech
2. bar.shanyue.tech，響應頭中返回 Access-Control-Allow-Origin: bar.shanyue.tech

看起來一切正常，但若是中間有緩存怎麼辦？

1. foo.shanyue.tech，響應頭中返回 Access-Control-Allow-Origin: foo.shanyue.tech，被 CDN 緩存
2. bar.shanyue.tech，因由緩存，響應頭中返回 Access-Control-Allow-Origin: foo.shanyue.tech，跨域出現問題

此時，Vary: Origin 就上場了，表明爲不一樣的 Origin 緩存不一樣的資源

總結 (簡要答案)

CORS 如何指定多個域名？

根據請求頭中的 Origin 來設置響應頭 Access-Control-Allow-Origin，思路以下

1. 老是設置 Vary: Origin，避免 CDN 緩存破壞 CORS 配置
2. 若是請求頭不帶有 Origin，證實未跨域，則不做任何處理
3. 若是請求頭帶有 Origin，證實瀏覽器訪問跨域，根據 Origin 設置相應的 Access-Control-Allow-Origin: <Origin>

使用僞代碼實現以下

// 獲取 Origin 請求頭
const requestOrigin = ctx.get('Origin');

ctx.set('Vary', 'Origin')

// 若是沒有，則跳過
if (!requestOrigin) {
  return await next();
}

// 設置響應頭
ctx.set('Access-Control-Allow-Origin', requestOrigin)

相關問題： 如何避免 CDN 爲 PC 端緩存移動端頁面

更多面試

• 【字節-視頻架構組-前端】頭條架構組招人了內含自測題
• 【美團】什麼是防抖和節流，他們的應用場景有哪些
• 【美團】如何獲取一個進程的內存並監控

關注我

我是山月，正致力於天天用五分鐘可以看完的簡短答案回答一個大廠高頻面試題。掃碼添加個人微信，備註進羣，加入高級前端進階羣.

歡迎關注公衆號【互聯網大廠招聘】，定時推送大廠內推信息及面試題簡答，天天學習五分鐘，半年進入大廠中