跨域CORS头

一 ： 跨域头信息

二 如何给CORS设置多域名

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

Access-Control-Allow-Orign：<origin> | *

* 代表全部域名， Origin代表特定域名

Origin：请求头

        如果存在跨域，则带上Origin，值为当前域名

        如果不存在跨域，则不带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

答案

CORS如何设置多个域名

根据请求头中的Origin来设置响应头Access-Control-Allow-Orign

1.设置Vary：Origin，避免CDN缓存破坏CORS配置

2.若请求头不带Origin，证明未跨域，不做处理

3.若带origin，证明浏览器跨域，根据origin设置相应的Access-Control-Allow-Orign：<Origin>

伪代码如下：

// 获取 Origin 请求头
const requestOrigin = ctx.get('Origin');

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

// 如果没有，则跳过
if (!requestOrigin) {
  return await next();
}

// 设置响应头
ctx.set('Access-Control-Allow-Origin', requestOrigin)

3. 名词解释

1.什么是源？

答：源origin 就是协议，域名和端口号，例如https://www.baidu:80

2.什么是同源?

url中的协议，域名，端口号均相同则属于同源。

3.同源检测

参考：一道头条面试题：如何给 CORS 设置多域名 - 知乎