在本机浏览器获取中设置授权

Question

我遇到了一个问题，我似乎无法为获取请求设置 headers，我想我遗漏了什么

var init = {
        method: 'GET',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
            'Authorization': 'Bearer myKey'
        }
    };
return fetch(url, init).then(function(response){...

在网络选项卡中检查请求时，我没有看到 headers 得到设置，而是看到

Access-Control-Request-Headers:accept, authorization, content-type

我希望什么时候看到

Authorization: Bearer myKey
Content-Type: application/json
Accept: application/json

我也尝试过使用零差异的原生 Headers()。

我是不是漏掉了什么？

Answer 1

我遇到了同样的问题，今晚进行了一些调查。问题是cross-origin resource sharing / CORS。对于 Fetch，它是默认设置，它使事情变得相当复杂。

除非来源和目的地相同，否则它是一个 cross-domain 请求，并且仅当请求是针对支持 CORS（Cross-Origin 资源共享）的目的地时才支持这些请求。如果没有，那么它将不会通过。您通常会看到类似 No 'Access-Control-Allow-Origin' header is present on the requested resource

的错误

这就是为什么您不能在 non-CORS 个网站上进行授权 headers；参见#5 和基本 headers

禁止 HEADER 名称：

不幸的是，在您尝试 XMLHttpRequest 路由之前，同样适用：这与 XMLHttpRequest 相同：

最后，您的前进选择是： 1.JSONP 2.写一个不在浏览器中的代理 3.将CORS放在目标服务器上

This article sums it up nicely

在本机浏览器获取中设置授权

Setting authorization in native browser fetch

javascript

browser

fetch-api