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可引起具有相同名稱的多個報頭，以在一個響應，在這種情況下，瀏覽器將其視爲具有多個值的單個報頭中發送。你不想那樣。