使用 XMLHttpRequest 不斷收到“訪問控制允許來源”錯誤

Question

我會通過使用 jQuery $.ajax函數解決這個問題，但在這種情況下 jQuery 不是選項。 相反，我將使用 CORS 請求。 我覺得響應請求的網絡服務器有問題，我很難弄清楚問題是什么。

這是我創建 CORS 請求的代碼

var httpRequest = new XMLHttpRequest();
httpRequest.open('POST', url, true);
httpRequest.setRequestHeader( 'Access-Control-Allow-Origin', '*');
httpRequest.setRequestHeader( 'Content-Type', 'application/json' );
httpRequest.onerror = function(XMLHttpRequest, textStatus, errorThrown) {
  console.log( 'The data failed to load :(' );
  console.log(JSON.stringify(XMLHttpRequest));
};
httpRequest.onload = function() {
  console.log('SUCCESS!');
}

這是 console.log 錯誤：

XMLHttpRequest 無法加載http://test.testhost.com/testpage 。 Access-Control-Allow-Headers 不允許請求頭字段 Access-Control-Allow-Origin。

下面是頭信息：

> Remote Address:**.**.***.**:80 Request
> URL:http://test.testdomain.com/testpage Request
> Request Method:OPTIONS
> Status Code:200 OK

請求頭：

OPTIONS /content-network HTTP/1.1
Host: test.testhost.com
Connection: keep-alive
Cache-Control: no-cache
Pragma: no-cache
Access-Control-Request-Method: POST
Origin: http://test.testdomain.com
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/36.0.1985.125 Safari/537.36
Access-Control-Request-Headers: access-control-allow-origin, content-type
Accept: */*
Referer: http://test.testdomain.com/
Accept-Encoding: gzip,deflate,sdch
Accept-Language: en-US,en;q=0.8

響應頭：

HTTP/1.1 200 OK
Date: Thu, 14 Aug 2014 20:17:25 GMT
Server: Apache
Last-Modified: Thu, 14 Aug 2014 20:17:25 +0000
Cache-Control: no-cache, must-revalidate, post-check=0, pre-check=0
ETag: "1408047445"
Access-Control-Allow-Origin: *
Access-Control-Allow-Headers: Content-Type
Vary: Accept-Encoding
Content-Encoding: gzip
Access-Control-Allow-Headers: origin, x-requested-with, content-type
Access-Control-Allow-Methods: PUT, GET, POST, DELETE, OPTIONS
Content-Length: 6117
Connection: close
Content-Type: text/html; charset=utf-8

Answer 1

您的服務器的響應允許請求包含三個特定的非簡單標頭：

Access-Control-Allow-Headers:origin, x-requested-with, content-type

但是您的請求具有服務器響應不允許的標頭：

Access-Control-Request-Headers:access-control-allow-origin, content-type

在 CORS 請求中發送的所有非簡單標頭必須由Access-Control-Allow-Headers響應標頭明確允許。 服務器的 CORS 響應不允許在您的請求中發送不必要的Access-Control-Allow-Origin標頭。 這正是“ ...不允許Access-Control-Allow-Headers ”錯誤消息試圖告訴您的內容。

請求沒有理由有這個標頭：它什么都不做，因為Access-Control-Allow-Origin是一個響應標頭，而不是請求標頭。

解決方案：刪除將Access-Control-Allow-Origin標頭添加到您的請求的setRequestHeader調用。

Answer 2

消除：

httpRequest.setRequestHeader( 'Access-Control-Allow-Origin', '*');

...並添加：

httpRequest.withCredentials = false;

Answer 3

除了您的 CORS 問題之外，您嘗試訪問的服務器還啟用了HTTP 基本身份驗證。 通過在傳遞給 XHR 的 URL 中指定憑據，您可以在跨域請求中包含憑據：

url = 'http://username:password@test.testhost.com/testpage'

Answer 4

在后端服務器上啟用 CORS 或添加 Chrome 擴展https://chrome.google.com/webstore/search/CORS?utm_source=chrome-ntp-icon並啟用

Answer 5

我們在 OAuth2 集成中經常看到這一點。 我們為客戶提供 API 服務，他們會天真地嘗試將他們的私鑰放入 AJAX 調用中。 這真的是很糟糕的安全性。 編碼良好的 API 網關、前端后端和其他此類代理不允許這樣做。 你應該得到這個錯誤。

我將引用@aspillers評論和更改一個字：“ Access-Control-Allow-Origin是指示是否允許客戶端看到的結果的內容的服務器響應發送頭”。

問題：問題在於開發人員試圖將他們的私鑰包含在客戶端（瀏覽器）JavaScript 請求中。 他們會得到一個錯誤，這是因為他們暴露了他們的客戶秘密。

解決方案：讓 JavaScript Web 應用程序與安全地保存客戶端機密的后端服務對話。 該后端服務可以向 OAuth2 提供程序驗證 Web 應用程序，並獲取訪問令牌。 然后 Web 應用程序可以進行 AJAX 調用。