javascript - 如何使用axios发送授权 header

Question

如何通过 axios.js 发送带有 token 的身份验证 header ？ 我尝试了一些没有成功的事情，例如:

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}`;

更新:

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

但我能够理解错误消息并修复了我的 axios 请求代码中的错误，它应该看起来像这样

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

Answer 1

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

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

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

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