一道头条面试题如何给-cors-设置多域名

45次阅读

共计 1685 个字符,预计需要花费 5 分钟才能阅读完成。

本文收录于 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 端缓存挪动端页面

更多面试

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

关注我

我是山月,正致力于 每天用五分钟可能看完的简短答案答复一个大厂高频面试题。扫码增加我的微信,备注进群,退出高级前端进阶群.

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

正文完
 0