javascript - 每次请求都会出现预检或 CORS 错误

Question

我已经在 CORS 上苦苦挣扎了很长时间，但仍然离完全理解还差得很远。

我最简单的例子是使用 Wunderlist API -

使用下面的代码:

 var settings = {
  "async": true,
  "crossDomain": true,
  "url": "http://a.wunderlist.com/api/v1/lists",
  "method": "GET",
  "headers": {
    "x-client-id": "{ID}",
    "x-access-token": "{TOKEN}",
    "cache-control": "no-cache"
  },
  "data": "{\n\t\"revision\": 1,\n\t\"completed\": true\n}"
}

$.ajax(settings).done(function (response) {
  console.log(response);
});

在 Postman/Fiddler 中会返回结果。但是，将其放到基本站点上，否则 Codepen 将返回 405、Pre-flight Warning 或 Invalid Request

我大致了解到您允许在您的服务器端使用它，但我必须假设不是每个站点都允许 Postman 等连接，也不是我注册的每个 vendor 都允许我的领域。

那么，您是如何在 API 调用中绕过 CORS 合规性的？我已经尝试了很多我读过的东西，包括 crossDomain、Cross-Origin Header 等，并且总是得到相同的结果。

有什么见解吗？

Answer 1

它被标记为预检的原因是您发送的额外 header 。 GET 请求不必使用预检请求，除非您传递自定义 header 。您有两个选择:

1. 最简单的解决方案是删除您尝试发送的自定义 header ，请求不应再被标记为需要 CORS 预检。

2. 如果您托管服务器代码，您可以检查传入请求(服务器端)以查看它是否具有请求方法 OPTIONS。如果是这样，您就知道这是预检并且应该响应告诉客户端哪些 header 是可接受的。要允许所有自定义 header ，预检响应应包含 'Access-Control-Request-Headers': '*' 响应 header 。

根据 https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS :

更新:根据 https://developer.wunderlist.com/documentation/concepts/authorization您必须注册您的应用程序才能与他们交谈。在该过程中的某个地方，他们可能会自动开始为您的域发送预检请求或允许您设置 header 。