“Access-Control-Allow-Origin 标头包含多个值”错误

Question

我在尝试使用 axios 在 reactjs 应用程序中调用 ajax 时遇到很多错误。我有一个api，它位于子域并从主域进行调用。

.htaccess:

Header add Access-Control-Allow-Origin: "*"
Header add Access-Control-Allow-Credentials: "true"
Header add Access-Control-Allow-Methods: "GET,HEAD,OPTIONS,POST,PUT"
Header add Access-Control-Allow-Headers: "Access-Control-Allow-Headers, Origin,Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers"

reactjs 中的 ajax 标头（使用 axios）：

var options = {
            method: 'GET',
            url: 'http://admin.mysite.com/menus/5',
            headers: {
                'Access-Control-Allow-Origin': '*',
                'Access-Control-Allow-Methods': 'GET,HEAD,OPTIONS,POST,PUT',
                'Access-Control-Allow-Headers': 'Access-Control-Allow-Headers, Origin,Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers'
            }
        }

我已尝试对其中的每一项进行更改，但出现不同的错误。如果我有Header add Access-Control-Allow-Origin: "*"，它会抱怨双重来源。如果我删除它，我会收到关于 Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headers in preflight response 的错误消息，其他更改已回复 Access-Control-Allow-Headers is not allowed by Access-Control-Allow-Headers in preflight response

我将 wordpress 用作无头 CMS，并利用 restful api 来提取我需要的数据。我注意到如果我删除了所有这些，我可以get 我的数据很好，但我不能post 不解决跨域问题。

Answer 1

如果我删除它，我会收到关于 Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headers in preflight response 的错误消息，其他更改已回复 Access-Control-Allow-Headers is not allowed by Access-Control-Allow-Headers in preflight response

这两条错误消息都发生了，因为在您的前端 JavaScript 代码中，您有这样的：

headers: {
    'Access-Control-Allow-Origin': '*',
    'Access-Control-Allow-Methods': 'GET,HEAD,OPTIONS,POST,PUT',
    'Access-Control-Allow-Headers': 'Access-Control-Allow-Headers, Origin,Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers'
}

您需要从请求代码中删除整个 headers 选项。

原因是，所有Access-Control-Allow-* 标头都是服务器必须返回的响应 标头。将它们作为请求标头发送的唯一效果是导致问题中引用的错误类型。

如果您添加它们的原因是您在服务器端为您发送请求的 API 端点设置的 .htaccess 没有使服务器发送正确的响应标头，那么您需要弄清楚出来并在服务器端修复它。从客户端发送额外的请求标头并不能解决这个问题。

您可以为您的.htaccess 尝试一个建议：而不是Header add，使用Header set：

Header set Access-Control-Allow-Origin: "*"
Header set Access-Control-Allow-Credentials: "true"
Header set Access-Control-Allow-Methods: "GET,HEAD,OPTIONS,POST,PUT"
Header set Access-Control-Allow-Headers: "Access-Control-Allow-Headers, Origin,Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers"

Header set 告诉 Apache 覆盖/破坏任何可能已经为特定标头设置的现有值，而 Header add 告诉它只添加具有给定名称和值的标头，而不覆盖任何可能的标头已设置为该名称。

所以Header add 可能会导致在响应中发送多个同名的标头，在这种情况下，浏览器会将其视为具有多个值的单个标头。你不想这样。