Access-Control-Allow-Origin如何给CORS设置多域名
作为通配符来说,直接变成对所有域名公开,非常的不安全。那如何设置特定的多个域名?Vary:<header1> , <header2>... 某些字段进行缓存。因此,响应现支持字段Vary,其可以对报文中某个字段的缓存进行控制。Vary: *所有字段都不进行缓存。控制哪些域名可以共享资源,取值如下。
文章共525字 · 阅读需要大约2分钟
一键AI生成摘要,助你高效阅读
问答
·
CORS
通过控制 Access-Control-Allow-Origin
控制哪些域名可以共享资源,取值如下
Access-Control-Allow-Origin: <origin> | *
其中 *
代表所有域名,origin
代表指定特定域名
但是 *
作为通配符来说,直接变成对所有域名公开,非常的不安全。那如何设置特定的多个域名?
根据我们惯性思维,可能会想出如下的方法进行多域名配置:
//1、通过逗号分隔各个域名【错误!】
res.header('Access-Control-Allow-Origin','http://localhost:3000,http://localhost:3001');
//2、在头部添加重复字段【错误!】
res.header('Access-Control-Allow-Origin','http://localhost:3000');
res.header('Access-Control-Allow-Origin','http://localhost:3001');
但这些都是错误的!会导致所有的origin都对跨域请求无效!
正确的做法,写出代码检测Origin,给Access-Control-Allow-Origin进行动态配置,代码如下:
// 获取 Origin 请求头
const requestOrigin = ctx.get('Origin');
// 如果没有,则跳过;或者不符合白名单条件
if (!requestOrigin || ...) {
return await next();
}
// 设置响应头
ctx.set('Access-Control-Allow-Origin', requestOrigin)
但是特别注意:缓存/CDN对响应头字段的影响,可能会导致上述的错误情况2
因此,响应现支持字段Vary,其可以对报文中某个字段的缓存进行控制
Vary: * 所有字段都不进行缓存
Vary:<header1> , <header2>... 某些字段进行缓存
因此我们可以设置Vary:Origin,让服务器不调用缓存中的Origin字段,每次都自动检测,代码如下:
// 获取 Origin 请求头
const requestOrigin = ctx.get('Origin');
ctx.set('Vary', 'Origin')
// 如果没有,则跳过;或者不符合白名单条件
if (!requestOrigin || ...) {
return await next();
}
// 设置响应头
ctx.set('Access-Control-Allow-Origin', requestOrigin)
更多推荐
已为社区贡献3条内容
所有评论(0)