一道头条面试题：如何给 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 端缓存移动端页面

更多面试

• 【字节-视频架构组-前端】头条架构组招人了内含自测题
• 【美团】什么是防抖和节流，他们的应用场景有哪些
• 【美团】如何获取一个进程的内存并监控

关注我

我是山月，正致力于天天用五分钟可以看完的简短答案回答一个大厂高频面试题。扫码添加个人微信，备注进群，加入高级前端进阶群.

欢迎关注公众号【互联网大厂招聘】，定时推送大厂内推信息及面试题简答，天天学习五分钟，半年进入大厂中