时间戳

首页 > 解决方案 > CORS问题：标头包含多个值，但只允许一个

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

问题描述

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

我有前端需要通过 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...])。

请帮帮我。

提前欢呼和感谢。

Ĵ

标签： javascriptcorscross-domainaxios

解决方案

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

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

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

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

这是其中之一：

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

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

删除其中之一。

是否与发送的 axios 标头有关

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

推荐阅读