如何用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}`;

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

Answer 1

对于非简单的http请求，您的浏览器将首先发送一个“Preflight”请求（OPTIONS method request）以确定有问题的站点认为应该发送哪些安全信息（参见此处了解有关此问题的跨源策略规范）。主机可以在预飞行响应中设置的相关标头之一是access-control-allow-headers。如果您要发送的任何报头都没有在规范的白名单报头列表或服务器的飞行前响应中列出，那么浏览器将拒绝发送您的请求。

在您的示例中，您正在尝试发送authorization头，它不被认为是最安全的发送头之一。然后，浏览器发送一个预飞行请求，询问服务器是否应该发送该报头。服务器要么发送一个空的access-control-allow-headers头（这被认为意味着“不允许任何额外的头”），要么发送一个在其允许的头列表中不包括authorization的头。因此，浏览器不会发送您的请求，而是选择通过抛出错误来通知您。

任何允许您发送此请求的Javascript变通方法都应该被认为是一个bug，因为它违反了浏览器为了自身安全而试图强制执行的跨源请求策略。

tl；dr-如果您希望发送authorization头，那么您的服务器最好配置为允许发送authorization头。设置服务器，使其使用access-control-allow-headers:authorization头响应该url上的options请求。