标签：Control Origin errors http res Access Allow
背景
今天在调试项目的时候，碰到了一个跟跨域相关的问题——CORS errors。
场景如下：前端向第三方平台发起一个请求，使用了 Nginx 做代理转发去处理跨域问题。
但是，在经过Nginx代理转发后，虽然status code 为200，但是请求报错 CORS errors，并且没有没有返回响应结果。
打开浏览器控制台发现报了以下错误：
Access to fetch at 'http://47.115.13.227:3004/cors/test' from origin 'http://127.0.0.1:5500' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header contains multiple values '*, *', but only one is allowed. Have the server send the header with a valid value, or, if an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
大致意思是 Access-Control-Allow-Origin 请求头包含了多个值，但是只有一个是被允许的！
接着观察了下响应头，果然有两个 Access-Control-Allow-Origin 标头。
解决方法
错误提示只有一个 Access-Control-Allow-Origin 的值是被允许的，那么我们去除Nginx或者服务端的 Access-Control-Allow-Origin 配置即可。
验证想法
为了验证想法，在本地用VSCODE起了一个前端页面 http://127.0.0.1:5500/cors.html ，发起请求的路径为 http://47.115.13.227:3004/cors/test ，经过Nginx配置转发到真实的服务器 http://47.115.13.227:8004/cors/test 中。
<!DOCTYPE html>
<html>
<head>
<title>cors</title>
</head>
<body>
<h1 class="title"></h1>
<script>
fetch('http://47.115.13.227:3004/cors/test', {
method: 'POST',
}).then(res => {
return res.text();
}).then(res => {
console.debug(res);
if (res) {
const h = document.querySelector('.title');
h && (h.innerText = res);
}
})
</script>
</body>
</html>
- Nginx
server {
listen 3004;
server_name www.zzcyes.com;
add_header Access-Control-Allow-Origin *;
root /var/www/;
index index.html index.htm;
location /{
proxy_pass http://47.115.13.227:8004;
}
}
- Node.js服务
const http = require('http');
const corsServer = http.createServer(function(req, res) {
res.setHeader("Access-Control-Allow-Origin", "*");
res.setHeader("Access-Control-Allow-Headers", "Content-type,Content-Length,Authorization,Accept,X-Requested-Width");
res.setHeader("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
res.writeHead(200, { 'Content-type': 'text/plain;charset=UTF8' });
res.end('8004: succesed get test word!');
});
corsServer.listen('8004', function() {
console.log((new Date()) + ' Server is listening on port:', 8004);
})
去除Nginx配置的"Access-Control-Allow-Origin"
- Nginx
server {
listen 3004;
server_name www.zzcyes.com;
#add_header Access-Control-Allow-Origin http://47.115.13.227:3004;
root /var/www/;
index index.html index.htm;
location /{
proxy_pass http://47.115.13.227:8004;
}
}
去除Nginx中配置的 Access-Control-Allow-Origin 标头后，成功接收到了服务端的响应结果，并且响应头只保留了一个来自 Node.js 服务端配置的 Access-Control-Allow-Origin 标头。
去除服务端配置的"Access-Control-Allow-Origin"
- Node.js服务
const http = require('http');
const corsServer = http.createServer(function(req, res) {
// res.setHeader("Access-Control-Allow-Origin", "*");
res.setHeader("Access-Control-Allow-Headers", "Content-type,Content-Length,Authorization,Accept,X-Requested-Width");
res.setHeader("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
res.writeHead(200, { 'Content-type': 'text/plain;charset=UTF8' });
res.end('8004: succesed get test word!');
});
corsServer.listen('8004', function() {
console.log((new Date()) + ' Server is listening on port:', 8004);
})
去除 Node.js 服务中配置的 Access-Control-Allow-Origin 标头后，成功接收到了服务端的响应结果，并且响应头只保留了一个来自 Nginx 配置的 Access-Control-Allow-Origin标头。
总结
因为 Nginx 和服务端均对 Access-Control-Allow-Origin 标头设置了值，导致请求未通过浏览器的 CORS 策略，从而被浏览器拦截了响应结果。在平时项目开发中，尽量协调好一端去配置跨域策略，避免因重复设置标头而造成请求失败的问题。
如果再碰到类似的 CORS errors 问题，先从控制台的提示查看错误信息，再根据MDN的文档 CORS errors 去查找错误原因再确定解决方案！
链接
标签：Control,Origin,errors,http,res,Access,Allow 来源： https://www.cnblogs.com/zzcyeah/p/cors-multiple-values.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。