CORS问题：标头包含多个值，但只允许一个

Posted 2023-03-04

【中文标题】CORS问题：标头包含多个值，但只允许一个

【英文标题】：CORS Problems: header contains multiple values, but only one is allowed

【发布时间】：2019-08-13 15:18:24

【问题描述】：

我已经尝试为这个头痛找到一个解决方案整整一个小时，但无法更进一步，所以我希望有人能给我一些指点，让我不再头痛：

我的前端需要通过 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>

所以它应该允许来自任何地方的起源。到目前为止一切顺利。

现在，如果我让我的 axios 调用正在发送的标头：

看起来像这样。

现在响应头中有两个access-control-allow-origin，这似乎造成了一些麻烦。

我得到的错误：

从源“http://localhost:3000”访问“http://apidomain.test/api/previews/v1/preview/?id=726&_wpnonce=025ff5c5fa”处的 XMLHttpRequest 已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：“Access-Control-Allow-Origin”标头包含多个值 '*, http://localhost:3000'，但只允许一个。

我该如何解决这个问题？

- 我怎样才能允许多个值（这有什么不好的吗） – 或者我怎样才能防止这种混乱的两个值放在首位？

是否与发送 axios 标头有关（我曾经有一个跟踪，我认为设置 axios 标头而不是添加一个可能会有所帮助，但不知何故它无处可去）。

（我没有做任何特别的事情，只是：axios.get('url', withCredentials: true, transformResponse: [some transforms...])。

请帮帮我。

提前干杯和感谢。

J

【参考方案1】：

我怎样才能允许多个值（这会不会很糟糕）

你不能（浏览器只是不支持它）。

或者我怎样才能首先防止这两个值的混乱？

删除设置标头的两位代码之一。

这是其中之一：

Header always set Access-Control-Allow-Origin: "*"

某处您有添加http://localhost:3000 部分的代码。

删除其中一个。

是否与发送 axios 标头有关

当然不是直接的。我上面提到的另一段代码可能根据请求标头动态运行。

【讨论】：

嗯，感谢您的快速回复。实际上我只能想象它在这里import axios from 'axios' ...(some stuff missing) export default function getPreviewData(backendUrl, previewUrl) return axios .get(`$backendUrl + previewUrl`, withCredentials: true, transformResponse: [].concat( axios.defaults.transformResponse, normalizeWordpress, flattenACF ) ) .then(res => res.data) ，但我没有设置任何东西。我会尝试挖掘一下，但我真的不知道我在哪里做这个......

还有我不明白的地方：如果我设置了一个通配符，我想允许哪些域，为什么不接受我的localhost:3000 ？

@Merc — 当给定无效的安全规则时，进入不安全状态是非常危险的。

对不起。我不完全明白。这是我第二条评论的答案吗？

@Merc — 是的，是的。