Reactjs Ajax请求跨源处理

Question

我越来越想做利用爱可信在reactjs应用的ajax调用错误的mirriad。我有一个api生活在一个子域，并从主域进行调用。

的.htaccess：在reactjs（使用爱可信）

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" 

阿贾克斯头：

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

如果我删除II获得有关其他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可引起具有相同名称的多个报头，以在一个响应，在这种情况下，浏览器将其视为具有多个值的单个报头中发送。你不想那样。