javascript CORS 问题：header 包含多个值，但只允许一个
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/55302960/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CORS Problems: header contains multiple values, but only one is allowed
提问by Merc
I have tried finding a solution for this for a full hour of headache and could not get one step further, so I hope somenone can give me some pointers and save me some more headache:
我已经尝试了整整一个小时的头痛找到解决方案，但无法更进一步，所以我希望有人能给我一些指点，让我少一些头痛：
I have frontend that needs to fetch some data via axios from a backend API. In my backend I have an .htaccess with the following part:
我有前端需要通过 axios 从后端 API 获取一些数据。在我的后端，我有一个包含以下部分的 .htaccess：
<IfModule mod_headers.c>
Header set X-Content-Type-Options "nosniff"
Header set X-XSS-Protection "1; mode=block"
# Always set these headers for CORS.
Header always set Access-Control-Max-Age 1728000
Header always set Access-Control-Allow-Origin: "*"
Header always set Access-Control-Allow-Methods: "GET,POST,OPTIONS,DELETE,PUT"
Header always set Access-Control-Allow-Headers: "DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,C$
Header always set Access-Control-Allow-Credentials true
</IfModule>
So it should allow origins from anywhere. So far so good.
所以它应该允许来自任何地方的起源。到现在为止还挺好。
Now, if I make my axios call the headers being sent:
现在，如果我让 axios 调用正在发送的标头：
Look like this.
看起来像这样。
Now in the response header there are TWO access-control-allow-origin, which seems to cause some trouble.
现在在响应头中有两个 access-control-allow-origin ，这似乎引起了一些麻烦。
The error I am getting:
我得到的错误：
Access to XMLHttpRequest at 'http://apidomain.test/api/previews/v1/preview/?id=726&_wpnonce=025ff5c5fa' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The 'Access-Control-Allow-Origin' header contains multiple values '*, http://localhost:3000', but only one is allowed.
从源 ' http://localhost:3000'访问 XMLHttpRequest 在 ' http://apidomain.test/api/previews/v1/preview/?id=726&_wpnonce=025ff5c5fa'已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：'Access-Control-Allow-Origin' 标头包含多个值 '*, http://localhost:3000'，但只允许一个。
How can I fix this?
我怎样才能解决这个问题？
-?How can I either allow more than one values (would this be bad in any way) – Or how can I prevent this mess with two values in the first place?
-？我怎样才能允许多个值（这会不会有任何坏处） - 或者我怎样才能首先防止两个值造成这种混乱？
Has it to do with axios headers being sent (I once had a trace, where I thought that setting axios header instead of adding one could help, but somehow it lead nowhere).
是否与发送的 axios 标头有关（我曾经有过跟踪，我认为设置 axios 标头而不是添加一个标头会有所帮助，但不知何故它无济于事）。
(I am not doing anything special, just: axios.get('url', withCredentials: true, transformResponse: [some transforms...]).
（我没有做任何特别的事情，只是：axios.get('url', withCredentials: true, transformResponse: [some transforms...])。
Please help me out here.
请帮帮我。
Cheers and thanks in advance.
提前干杯和感谢。
J
J
回答by Quentin
How can I either allow more than one values (would this be bad in any way)
我怎么能允许多个值（这会以任何方式坏吗）
You can't (browsers just don't support it).
你不能（浏览器只是不支持它）。
Or how can I prevent this mess with two values in the first place?
或者我怎样才能首先防止这两个值的混乱？
Remove one of the two bits of code which are setting the header.
删除设置标头的两位代码中的一位。
This is one of them:
这是其中之一：
Header always set Access-Control-Allow-Origin: "*"
Header always set Access-Control-Allow-Origin: "*"
Somewhereyou have code which is adding the http://localhost:3000section.
某处您有添加该http://localhost:3000部分的代码。
Remove one of them.
删除其中之一。
Has it to do with axios headers being sent
是否与发送的 axios 标头有关
Certainly not directly. The other bit of code I mentioned above mightact dynamically based on the request headers.
当然不是直接的。我上面提到的另一段代码可能会根据请求标头动态执行。
