在跟客户对Nginx跨域问题的过程中遇到的几种情况

技术背景是SaaS平台采用vue axios请求，客户后端java

第一次

最开始本地没有启用

axios.defaults.withCredentials = false

这项axios配置的跨域设置，客户后端Nginx配置跨域

"Access-Control-Allow-Origin", "*"

但是神奇的地方来了，set-cookie可以成功赋值，但是有时间间隔（这个间隔多久也不知道），问题出现在第二天我刷新页面，本地存在一个cookie已经过期，但是请求以后的set-cookie没有正确的赋值，后续的认证获取录音进行的播放失败，地址报错403

第二次

本地开启

axios.defaults.withCredentials = true

Nginx配置域名，这里对接同事也没配置过，以产品为主的同事

"Access-Control-Allow-Origin", "www.XXX.com,www.XXX.com"

这样配置了两个跨域地址，然后我查询万能百度后改为

set $cors '';
if ($http_origin ~* "^https://www.XXX.com$"){
	set $cors $http_origin;
}
if ($http_origin ~* "^https://www.XXX.com$"){
	set $cors $http_origin;
}

···

location /api/v2/ {
	add_hearder 'Access-Control-Allow-Origin' '$cors';
	add_hearder 'Access-Control-Allow-Credentials' 'true';
	add_hearder 'Access-Control-Allow-Methods' '*';
	add_hearder 'Access-Control-Allow-Headers' '*';
}

配置完成后提示

Request header field [authorization] is not allowed by [Access-Control-Allow-Headers] in preflight response.

第三次

发现上述报错后奈何英语不好，翻译无果后百度也没有找到有用信息，最后查看具体英文格式单独查后发现Access-Control-Allow-Headers 缺少配置authorization（这个地方再解决完问题时还没明白为什么会报错）查询出来的结果也有一串代码附上，我以为重点是再"Access-Control-Allow-Methods","GET, POST, DELETE, PUT"配置完成后还是提示，再次查询发现Access-Control-Allow-Headers 的值大多数文章没有设置为通配符*，而是配置了大量值，让同事将代码改为

'Access-Control-Allow-Headers' 'Authorization,Accept,Origin,Keep-Alive,User-Agent,X-Mx-ReqToken,X-Data-Type,X-Auth-Token,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range'

测试后问题解决

关于Access-Control-Allow-Headers的值为什么不能为*

解决完问题后查找具体原因发现有位大佬的文章里面分析的很明白，结论是

Access-Control-Allow-Headers: * 在部分客户端上有兼容问题。

注：跨域错误是不会暴露给JS的，就意味着 try{}catch(corsError){corsError.message}拿不到错误的具体信息，不太好在没有控制台的环境看到问题。

同时也看到了别人引入CORS官网的一张图片，希望可以对排查问题带来方便

nginx怎么为js设置响应头防止告诉缓存 nginx修改响应头_nginx

注：

Nginx中的响应头'Accept-Ranges' bytes会控制返回多媒体数据可不可以进行拖放进度，如果有多媒体不能进行进度拖放检查一下有没有。