使用 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