fetch API：无法根据 Chrome 的请求添加授权 Header

Question

Chrome 版本: 57.0.2987

其实在旧的Chrome版本我也有这个问题。我使用我的访问令牌 Header 在请求 Header 上添加了 Authorization，

fetch('https://example.com/endpoint', {
  method: 'GET',
  headers: {
    'Authorization': 'Bearer ' + accesstoken
  }  
})

我总是 Access-Control-Allow-Headers:authorization 在 Chrome 中响应 Header 另外，我的fetch一直都是Request Method:OPTIONS（不显示GET），那么Status Code就是200 OK in Chrome

但是如果我运行在 Firefox（版本 52.0.1）中使用相同的获取代码，一切都会很好。我可以正确地在 请求 Header 上添加 Authorization。在 Firefox 中，它不会在 Response Header 上显示 Access-Control-Allow-Headers:authorization。它将根据请求 header.

显示 Authorization: Bearer accesstoken

服务器端已经为我的请求处理了 CORS header..

这是一个 Chrome 错误还是我的代码错误？我应该如何在 中使 Authorization 正确地在 Chrome 中请求 Header?

下图是 Chrome 开发工具中 Network 的详细信息：

下图是 Firefox 开发工具中 Network 的详细信息：

Answer 1

浏览器将在 OPTIONS 请求之前发送，没有授权令牌，然后将发送真正的请求

http://www.w3.org/TR/cors/ See http://metajack.im/2010/01/19/crossdomain-ajax-for-xmpp-http-binding-made-easy/ 了解更多信息

Answer 2

正如@stackdave 所说，跨域时浏览器在 GET 请求之前发送 OPTIONS 请求 ajax。然后浏览器将等待服务器响应。我的情况是服务器没有响应，所以浏览器只是停止 OPTIONS 状态。服务器需要处理这个问题，它仍然是 CORS 问题，而不是获取 api 错误或问题。

fetch API：无法根据 Chrome 的请求添加授权 Header

fetch API: Can't add Authorization on Request Header with Chrome

http

fetch

cors

preflight

fetch-api