如何使用 axios 发送授权标头

Question

如何通过 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}` } });

原文由 foobar 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

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

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

原文由 Ashelyn Dawn 发布，翻译遵循 CC BY-SA 4.0 许可协议