如何使用 axios 发送授权标头

IT技术 javascript axios
2021-03-03 06:03:05

如何通过 axios.js 发送带有令牌的身份验证标头？我尝试了一些没有成功的事情，例如：

const header = `Authorization: Bearer ${token}`;
return axios.get(URLConstants.USER_URL, { headers: { header } });

给我这个错误： 

XMLHttpRequest cannot load http://localhost:8000/accounts/user/. Request header field header is not allowed by Access-Control-Allow-Headers in preflight response.

我已经通过设置全局默认值设法让它工作，但我猜这不是单个请求的最佳主意： 

axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;

更新 ：

科尔的回答帮助我找到了问题所在。我正在使用django-cors-headers 中间件，默认情况下它已经处理了授权标头。

但是我能够理解错误消息并修复了我的 axios 请求代码中的错误，它应该如下所示 

return axios.get(URLConstants.USER_URL, { headers: { Authorization: `Bearer ${data.token}` } });
6个回答

对于非简单的 http 请求，您的浏览器将首先发送“预检”请求（OPTIONS 方法请求），以确定相关站点认为要发送的安全信息（有关此的跨域策略规范，请参见此处）。主机可以在预检响应中设置的相关标头之一是Access-Control-Allow-Headers. 如果您要发送的任何标头未在规范的白名单标头列表或服务器的预检响应中列出，则浏览器将拒绝发送您的请求。

在您的情况下，您正在尝试发送一个Authorization标头，这不被认为是普遍安全的发送标头之一。然后浏览器发送一个预检请求，询问服务器是否应该发送该标头。服务器要么发送一个空Access-Control-Allow-Headers标头（这被认为意味着“不允许任何额外的标头”），要么它正在发送一个不包含Authorization在其允许标头列表中的标头。因此，浏览器不会发送您的请求，而是选择通过抛出错误来通知您。

您发现的任何允许您发送此请求的 Javascript 解决方法都应该被视为错误，因为它违反了您的浏览器为了您自己的安全而试图强制执行的跨源请求策略。

tl;dr - 如果您想发送Authorization标头，您的服务器最好配置为允许它。设置您的服务器，以便它OPTIONS使用Access-Control-Allow-Headers: Authorization标头响应该 url 上的请求。

谢谢你，科尔！您的回答帮助我找到了问题所在。我正在使用 django-cors-headers 中间件，默认情况下它已经处理了授权标头。但是我能够理解错误消息并修复了我的 axios 请求代码中的错误，它应该如下所示 return axios.get(URLConstants.USER_URL, { headers: { Authorization: `Bearer ${data.token}` } });
2021-04-29 06:03:05
别客气！我的 API 一直遇到这种问题。很高兴我能帮助您了解它必须经历的过程。
2021-05-07 06:03:05

这对我有用：

let webApiUrl = 'example.com/getStuff';
let tokenStr = 'xxyyzz';
axios.get(webApiUrl, { headers: {"Authorization" : `Bearer ${tokenStr}`} });
与上述相比，答案中的细节较少，但这是每个人在搜索谷歌时都在寻找的答案。
2021-05-14 06:03:05

您可以像这样将其添加为默认配置，而不是将其添加到每个请求中。

axios.defaults.headers.common['Authorization'] = `Bearer ${access_token}`
你如何放置这个配置？在根 (index.js, App.js) 中？还是在一个单独的文件中？
2021-05-11 06:03:05
如果令牌尚未设置怎么办？
2021-05-11 06:03:05
您可以使用该代码在准备好后将其导入，以便在您的请求之前可用。
2021-05-14 06:03:05

试试这个 ：

axios.get(
    url,
    {headers: {
        "name" : "value"
      }
    }
  )
  .then((response) => {
      var response = response.data;
    },
    (error) => {
      var status = error.response.status
    }
  );
我相信它应该是 { 'Authorization': 'Bearer <my token>' }
2021-04-29 06:03:05
所以标题名称将是“Access-Control-Allow-Headers”，值就是你想要的。
2021-05-02 06:03:05
所以，你的意思是我有这样的东西： axios.get( url, { headers: { 'Access-Control-Allow-Headers': 'Bearer <my token>' } } ) ？那行不通。
2021-05-09 06:03:05
第一条评论不正确；Access-Control-Allow-Headers是一个响应头，必须从服务器发送到浏览器。@JohnHarding 说得对；要在请求中设置的适当标头是 Authorization 标头。此外，没有空格或其他特殊字符的标题不需要被引用。由于该问题专门与 Authorization 标头有关，并且仅提供一般性建议，仅通过解释“尝试此”作为解释，因此我无法真诚地对其进行投票。
2021-05-14 06:03:05

您几乎是正确的，只需以这种方式调整您的代码

const headers = { Authorization: `Bearer ${token}` };
return axios.get(URLConstants.USER_URL, { headers });

请注意我放置反引号的位置，我在 Bearer 之后添加了 ' '，如果您确定在服务器端处理，则可以省略

通常（根据规范）-在身份验证方案和令牌之间有一个空格，而不是破折号 ( )。我从未见过任何类型的服务器都需要像您所展示的那样使用破折号，如果提供的话，大多数（如果不是全部）都会发回错误。
2021-04-23 06:03:05
其它你可能感兴趣的问题
上一篇如何在 .ready() 期间更改文档的标题？ 下一篇如何停止“setInterval”