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

Setting authorization in native browser fetch

本文关键字：设置 授权 获取 本机 浏览器      更新时间：2023-09-26

我遇到了一个问题，我似乎无法设置获取请求的标头，我想我缺少了一些

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

当在网络选项卡中检查请求时，我没有看到标题被设置，而是看到

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

我希望什么时候能看到

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

我还尝试过使用零差异的原生Headers（）。

我是不是遗漏了什么？

我也遇到了同样的问题，今晚进行了一些调查。问题是跨来源资源共享/CORS。对于Fetch，它是默认的，它使事情变得更加复杂。

除非来源和目的地相同，否则这是一个跨域请求，并且只有当请求指向支持CORS（跨来源资源共享）的目的地时，才支持这些请求。如果没有，它就不会通过。您通常会看到类似No 'Access-Control-Allow-Origin' header is present on the requested resource 的错误

这就是为什么你不能在非CORS网站上做授权头；参见#5和基本标题

  • https://fetch.spec.whatwg.org/#concept-收割台防护装置
  • https://fetch.spec.whatwg.org/#simple-收割台

禁止的标头名称：

  • https://developer.mozilla.org/en-US/docs/Glossary/Forbidden_header_name
  • https://fetch.spec.whatwg.org/#forbidden-标头名称

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

  • https://www.w3.org/TR/XMLHttpRequest/#the-open（）-方法
  • https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest
  • http://arunranga.com/examples/access-control/credentialedRequest.html

最后，您可以选择：1.JSONP2.编写不在浏览器中的代理3.将CORS放在目标服务器上

这篇文章很好地总结了

相关文章：