Pre-flight 未触发 CORS 检查请求

Question

据我了解，如果以下任一条件为 false（来源：https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#Simple_requests），浏览器将发送 pre-flight 请求：

请求方法为 GET、HEAD 或 POST。
未设置自定义 header。
Content-Type header 值为 application/x-www-form-urlencoded、multipart/form-data 或 text/plain.

我有一个 Web 应用程序，它向不同来源的服务器发送 GET 请求。由于我必须向服务器发送 cookie，因此属性 withCredentials 设置为 true。 header Content-Type 设置为 application/json。对于这个请求，浏览器不会触发 pre-flight 请求，但应该触发，因为第三个条件为假。这背后的原因可能是什么？它与Content-Type header对于GET请求的无足轻重有什么关系吗（因为没有请求body）？

编辑：添加请求代码：

configObject = {
  'withCredentials': true,
  headers: {
    'Content-Type': 'application/json'
  }
};

function getRequest(url, dict) {
  $http.get(url, Object.assign({}, configObject)).success(function(result) {
    // on success
  }).error(function(err) {
    // on error
  });
  // return
}

Answer 1

如果您的前端代码正在发起一个 cross-origin 请求，并且发出请求的代码实际上将 Content-Type header 设置为 application/json，那么这绝对会触发浏览器做预检。总是。

所以这意味着，在问题的情况下，浏览器没有被触发进行预检的原因是 header 实际上没有被添加到浏览器最终的请求中正在发送。

但是问题中描述的特殊情况是……奇怪 — 因为它试图将 Content-Type header 添加到 GET 请求，并且问题中的 GET 请求（与几乎所有其他 GET 请求一样）没有请求 body.

所以在这种情况下，原因归结为 Angular，对于 $http 调用，自动做一些可以说是聪明的事情（如果意外的话）：在没有请求的情况下body，它从请求中删除了 Content-Type header — 这很有道理，因为如果没有请求 body，就不需要 header ] 指定其媒体类型。

请参阅 Angular, content type is not being sent with $http 中已接受的答案以确认这一点。

因此，如果出于某种原因您确实需要在没有请求 body 的请求中包含 Content-Type header，那么解决方案是不使用 Angular 的 $http — 而不是使用标准的 Fetch API，即使对于缺少请求 [=46= 的请求，它也允许您包含 Content-Type ] — 或者（如果您还需要使用 Angular 的 $http）将空请求 body 作为 $http 请求的一部分传递（通过将 data: '' 添加到请求中）。

Pre-flight 未触发 CORS 检查请求

Pre-flight Request not triggered for CORS check

xmlhttprequest

cors

angularjs

preflight

angular-http