使用 XHR 請求 API 時出現 CORS 錯誤

Question

我們正在向我們的在線分銷商之一提出 API 請求。 但是，我們收到了 CORS 錯誤。

來自“http://www.im-cmp.ch”的“https://api.cloud.im/marketplace/eu/products”上的 XMLHttpRequest 訪問已被 CORS 政策阻止：對預檢請求的響應不會通過訪問控制檢查：請求的資源上不存在“Access-Control-Allow-Origin”標頭。

我們在 Postman 中完成了請求，並且成功了。 我嘗試以與 Postman 中設置的方式完全相同的方式設置 requestHeaders（包括隱藏標頭），但是，由於無法設置隱藏標頭，因此出現錯誤。

拒絕設置不安全的標頭“Host”

這是客戶端問題還是服務器問題？ 我可能缺少 requestHeader 嗎？

  var xhr = new XMLHttpRequest();
  xhr.withCredentials = true;

  xhr.addEventListener("readystatechange", function() {
    if(this.readyState === 4) {
      console.log(this.responseText);
   }
  });

  xhr.open("GET", "https://api.cloud.im/marketplace/eu/products");
  xhr.setRequestHeader("X-Subscription-Key", "OUR PERSONAL SUBSCRIPTION KEY"); 
  xhr.setRequestHeader("Content-Type", "application/json");
  xhr.setRequestHeader("Authorization", "OUR BEARER TOKEN");
  //      xhr.setRequestHeader("Host", "http://www.im-cmp.ch/");
  xhr.setRequestHeader("accept", "*/*");
  //      xhr.setRequestHeader("Accept-Encoding", "gzip, deflate, br");
  //      xhr.setRequestHeader("Connection", "keep-alive");
  xhr.send();

Answer 1

這絕對是服務器問題。

服務器必須發送Access-Control-Allow-Origin -header： https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS 。

此外，錯誤指出這是在preflight請求期間發生的，這意味着事先提出了一個OPTIONS請求，這也需要 CORS 所需的響應頭。

該請求在 Postman 中有效，因為 CORS 是一項僅在瀏覽器中真正相關的功能，以保護用戶。

編輯：

同樣重要的是，服務器允許您使用Access-Control-Allow-Headers -header 發送請求標Access-Control-Allow-Headers ： https : //developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access -Control-Allow-Headers