每个请求的预检或 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 等连接，也不是每个我注册的供应商都允许我的领域。

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

有什么见解吗？

Answer 1

它被标记为预检的原因是您发送的额外标头。 GET 请求不必使用预检请求，除非您传递 custom 标头。你有两个选择：

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

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

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

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