如何使用 axios 发送授权标头

javascript axios

2022-08-30 04:16: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}` } });

答案 1

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

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

您发现的任何允许您发送此请求的Javascript解决方法都应被视为错误，因为它违反了浏览器为了您自己的安全而尝试实施的跨域请求策略。

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

答案 2

这对我有用：

let webApiUrl = 'example.com/getStuff';
let tokenStr = 'xxyyzz';
axios.get(webApiUrl, { headers: {"Authorization" : `Bearer ${tokenStr}`} });