获取API：无法在Chrome上的请求标头上添加授权 [英] fetch API: Can't add Authorization on Request Header with Chrome

问题描述

Chrome版本：57.0.2987

Chrome version: 57.0.2987

实际上，在较旧的Chrome版本中我也遇到此问题。
我在使用我的访问令牌的请求头上添加了授权，

Actually, in older Chrome version I also have this problem. I added Authorization on Request Header with my access token,

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

我总是得到访问控制 - 允许标题：授权在Chrome中的响应标题
此外，我的提取始终是请求方法：选项（不显示GET） ，然后状态代码在Chrome中为200 OK

I always get Access-Control-Allow-Headers:authorization on Response Header in Chrome Besides, My fetch is always Request Method:OPTIONS (not display GET), then Status Code is 200 OK in Chrome

但如果我在Firefox中运行相同的获取代码（版本52.0） .1），一切都很好。我可以正确地在请求标题上添加授权。它不会在Firefox中的响应标题上显示 Access-Control-Allow-Headers：authorization 。它将在Request标题上显示授权：Bearer accesstoken 。

But if I run the same fetch code in Firefox (ver 52.0.1 ), everything works great. I can add Authorization on Request Header correctly. It won't display Access-Control-Allow-Headers:authorization on Response Header in Firefox. It will display Authorization: Bearer accesstoken on Request header.

服务器端已经为我的请求标头处理了CORS。 。

The server side already processed CORS for my request header..

这是Chrome错误或我的代码错误？如何在Chrome中正确请求标题 授权？

This is a Chrome bug or my code fault? How should I do to make Authorization on Request Header correctly in Chrome?

以下图片是 Chrome 开发工具中的详细信息网络：

Below image is the detail Network in Chrome dev tool:

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

Below image is the detail Network in Firefox dev tool:

推荐答案

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

As @stackdave said, browser send OPTIONS request before GET request when cross-domain ajax. Then browser will wait server response. My situation that the server didn't response, so browser just stop OPTIONS status. Server need to handle this issue, it's still CORS issue, not fetch api bug or issue.

这篇关于获取API：无法在Chrome上的请求标头上添加授权的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！