如何使用axios发送授权标头

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

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

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

您发现任何仍然可以发送此请求的Javascript解决方法都应视为错误，因为它违反了您的浏览器为自己的安全而试图执行的跨源请求策略。

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

试试这个 ：

axios.get(
    url,
    {headers: {
        "name" : "value"
      }
    }
  )
  .then((response) => {
      var response = response.data;
    },
    (error) => {
      var status = error.response.status
    }
  );

这对我有用：

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

与其将其添加到每个请求中，不如将其添加为默认配置即可。

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

您几乎是正确的，只需以这种方式调整代码

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

注意在我放置反引号的位置，我在Bearer之后添加了''，如果可以确保在服务器端进行处理，则可以省略

代替调用axios.get函数，请使用：

axios({ method: 'get', url: 'your URL', headers: { Authorization: `Bearer ${token}` } })

res.setHeader('Access-Control-Allow-Headers',
            'Access-Control-Allow-Headers, Origin,OPTIONS,Accept,Authorization, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers');

Blockquote：您必须在setHeader（）中添加OPTIONS＆Authorization

此更改已解决我的问题，请尝试一下！

安装cors中间件。我们试图用自己的代码解决它，但是所有尝试都失败了。

这使其工作：

cors = require('cors')
app.use(cors());

原始连结

你可以试试看

axios.get(
    url,
    {headers: {
            "Access-Control-Allow-Origin" : "*",
            "Content-type": "Application/json",
            "Authorization": `Bearer ${your-token}`
            }   
        }
  )
  .then((response) => {
      var response = response.data;
    },
    (error) => {
      var status = error.response.status
    }
  );