【头条】CORS如果需要指定多个域名怎么办

❝

本题摘自于我 github 上的面试每日一题：https://github.com/shfshanyue/Daily-Question，并有大厂面经及内推信息，可「在左下角打开本题原文链接」

❞

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

Access-Control-Allow-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 请求头constrequestOrigin = ctx.get(Origin);// 如果没有，则跳过if(!requestOrigin) {returnawaitnext();}// 设置响应头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 请求头constrequestOrigin = ctx.get(Origin);ctx.set(Vary,Origin)// 如果没有，则跳过if(!requestOrigin) {returnawaitnext();}// 设置响应头ctx.set(Access-Control-Allow-Origin, requestOrigin)

❝

相关问题：如何避免 CDN 为 PC 端缓存移动端页面

❞

更多面试

关注我

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

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