如何使用axios发送授权标头 [英] How to send authorization header with axios

问题描述

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

  const header =`授权：Bearer $ {token }`; 
返回axios.get（URLConstants.USER_URL，{headers：{header}}）; 
  

给我这个错误：

  XMLHttpRequest无法加载http：// localhost：8000 / accounts / user /。预检响应中的Access-Control-Allow-Headers不允许使用请求标头字段标头。 
  

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

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

更新：

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

但是我能够理解错误信息并修复了我的axios请求代码中的错误，这应该是这样的

  return axios.get（URLConstants.USER_URL，{headers：{Authorization：`Bearer $ {data.token}`}}）; 
  

解决方案

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

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

您找到的任何Javascript解决方法都允许您发送此请求无论如何应该被视为一个错误，因为它违反了您的浏览器为了您自己的安全而强制执行的交叉来源请求政策。

tl; dr - 如果您想发送授权标头，最好配置您的服务器以允许它。设置您的服务器，使其响应访问控制允许标题：授权 OPTIONS 请求>标题。

How can I send an authentication header with a token via axios.js? I have tried a few things without success, for example:

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

Gives me this error:

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

I have managed to get it work by setting global default, but I'm guessing this is not the best idea for a single request:

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

Update :

Cole's answer helped me find the problem. I am using django-cors-headers middleware which already handles authorization header by default.

But I was able to understand the error message and fixed an error in my axios request code, which should look like this

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

解决方案

On non-simple http requests your browser will send a "preflight" request (an OPTIONS method request) first in order to determine what the site in question considers safe information to send (see here for the cross-origin policy spec about this). One of the relevant headers that the host can set in a preflight response is Access-Control-Allow-Headers. If any of the headers you want to send were not listed in either the spec's list of whitelisted headers or the server's preflight response, then the browser will refuse to send your request.

In your case, you're trying to send an Authorization header, which is not considered one of the universally safe to send headers. The browser then sends a preflight request to ask the server whether it should send that header. The server is either sending an empty Access-Control-Allow-Headers header (which is considered to mean "don't allow any extra headers") or it's sending a header which doesn't include Authorization in its list of allowed headers. Because of this, the browser is not going to send your request and instead chooses to notify you by throwing an error.

Any Javascript workaround you find that lets you send this request anyways should be considered a bug as it is against the cross origin request policy your browser is trying to enforce for your own safety.

tl;dr - If you'd like to send Authorization headers, your server had better be configured to allow it. Set your server up so it responds to an OPTIONS request at that url with an Access-Control-Allow-Headers: Authorization header.

这篇关于如何使用axios发送授权标头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！