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

Question

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

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

Answer 1

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

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

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

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

这是其中之一：

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

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

删除其中一个。

是否与发送 axios 标头有关

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