向本地主機上的其他端口發出請求時，CORS標頭“ Access-Control-Allow-Origin”丟失

Question

我有一個在端口6000上運行的節點Web服務器（快速）。

調用http://localhost:6000/ ， logic.js index.html提供給客戶端，該客戶端具有運行的腳本logic.js ：

var xhr = new XMLHttpRequest();
var url = 'http://localhost:4000/endpoint';
xhr.open('POST', url, true);
xhr.setRequestHeader('Content-type', 'application/json');
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log('endpoint');
    callback(xhr.responseText);
  }
};
xhr.send(JSON.stringify({'key': 'value'}));

端口4000上還有另一台快速服務器運行。

服務器設置一個端點，該端點僅返回請求主體提交的內容：

app.route('/segment')
  .post(bodyParser.json(), function(req, res) {
  res.set('Access-Control-Allow-Origin', '*');
  res.send(req.body);
});

當我訪問http://localhost:6000/ ，我在瀏覽器控制台中看到了這一點：

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:4100/segment. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing)

有沒有辦法在原型制作過程中繞過它？

Answer 1

您的端點可能不提供瀏覽器用來檢查CORS標頭的OPTIONS HTTP方法（在它們發出真實請求之前）。

如果您在開發和生產中需要不同的CORS標頭，我認為最好的方法是添加一個新的后端配置選項，其中包含允許的來源的值，並從某些全局響應過濾器中提供它們。

Answer 2

您已經設置了xhr.setRequestHeader('Content-type', 'application/json'); 因此這是一個預檢的請求 （經驗法則：Content-Type對於HTML表單的enctype屬性不是有效值，將觸發預檢的請求）。

您的服務器端代碼僅響應POST請求設置Access-Control-Allow-Origin標頭。 您還需要編寫服務器端代碼來響應預檢OPTIONS請求。

Answer 3

以下是解決此問題的幾種方法：

最佳：CORS標頭（需要更改服務器）

CORS（跨源資源共享）是服務器說“即使您來自其他來源，我也會接受您的請求”的一種方式。這需要服務器的配合-因此，如果您無法修改服務器（例如，如果您使用的是外部API），則此方法無效。

修改服務器以添加標頭Access-Control-Allow-Origin：*，以從任何地方啟用跨域請求（或指定域而不是*）。 這應該可以解決您的問題。

第二選擇：代理服務器

如果無法修改服務器，則可以運行自己的代理。 如果此代理與頁面不在同一來源，則該代理可以返回Access-Control-Allow-Origin標頭。

您無需向一些遠程服務器發送API請求，而是向您的代理發出請求，該代理會將它們轉發到遠程服務器。 以下是一些代理選項。

第三種選擇：JSONP（需要服務器支持）

如果CORS和代理服務器對您不起作用，則JSONP可能會有所幫助。 本質上，您使用回調參數發出GET請求：

（獲取） http://api.example.com/endpoint?callback=foo服務器將JSON響應包裝在對回調的函數調用中，您可以在其中處理它：

foo（{“ your”：“ json”，here：true}）有一些缺點，特別是JSONP僅支持GET請求，並且您仍然需要協作服務器。