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"

反应中的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可以导致在响应中发送多个具有相同名称的标头，在这种情况下，浏览器会将其视为具有多个值的单个标头。你不希望这样。

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

1 个答案: