如何使用 axios 发送授权标头

Posted 2023-02-22

【中文标题】如何使用 axios 发送授权标头

【英文标题】：How to send authorization header with axios

【发布时间】：2017-10-29 22:41:47

【问题描述】：

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

更新：

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

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

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

【参考方案1】：

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

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

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

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

【讨论】：

谢谢你，科尔！您的回答帮助我找到了问题所在。我正在使用 django-cors-headers 中间件，默认情况下它已经处理了授权标头。但是我能够理解错误消息并修复了我的 axios 请求代码中的错误，它应该看起来像这样 return axios.get(URLConstants.USER_URL, headers: Authorization: `Bearer $data.token` );

不客气！我一直在使用我的 API 时遇到此类问题。很高兴我能帮助您了解它必须经历的过程。

【参考方案2】：

这对我有用：

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

【讨论】：

与上述相比，答案中的细节较少，但这就是每个人在搜索 google 时都在寻找的答案。

【参考方案3】：

您可以像这样将其添加为默认配置，而不是将其添加到每个请求中。

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

【讨论】：

如何放置这个配置？在根目录（index.js，App.js）？还是在单独的文件中？

如果令牌还没有设置怎么办？

您可以使用该代码在它准备好时将其导入，以便在您请求之前可用。

【参考方案4】：

试试这个：

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

【讨论】：

所以标题名称将是 'Access-Control-Allow-Headers' 并且值是你想要的。

所以，你的意思是我会有类似的东西： axios.get( url, headers: 'Access-Control-Allow-Headers': 'Bearer ' ) ？这行不通。

我认为应该是 'Authorization': 'Bearer '

第一条评论不正确； Access-Control-Allow-Headers 是 response 标头，必须从服务器发送到浏览器。 @JohnHarding 说得对； 在请求中设置的适当标头是 Authorization 标头。此外，没有空格或其他特殊字符的标题不需要引用。由于该问题专门针对 Authorization 标头，并且仅提供一般性建议，并且仅提供“尝试此”作为解释，因此我不能真诚地支持它。

【参考方案5】：

您几乎是正确的，只需这样调整您的代码

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

注意我在哪里放置了反引号，我在 Bearer 之后添加了''，如果你确定在服务器端处理，你可以省略

【讨论】：

通常（按规范）在身份验证方案和令牌之间有一个空格，而不是破折号 (-)。我从来没有见过任何类型的服务器需要一个破折号，如果不是全部的话，如果提供的话，大多数都会发回一个错误。

【参考方案6】：

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

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

【参考方案7】：

你可以试试这个。

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
    
  );

【参考方案8】：

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

这使它起作用了：

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

Original link

【讨论】：

这是针对节点服务器的，不是针对 axios 的

发现此问题的用户会发现此答案很有用。这个问题可用于在用例中使用节点服务器，并提醒 cors 可以解决他们的问题，或者将他们的后端标头检查移至上述代码下方。帮我省去了很多挫折，谢谢你的铃声。

【参考方案9】：

为您的请求创建一个新的 axios 实例

  const instance=axios.create(
    baseURL:'www.google.com/'
    headers:
        'Content-Type':'application/json',
                    'Acess-Control-Allow-Origin':'*',
                    'Authorization':`Bearer $token`,
                    'Accept': "application/json"
        
    )

await instance.get(url,data)

【参考方案10】：

const response=await axios(url,
    method:"GET"
    
     headers: 
        "Authorization" : `Bearer $token`
      
    )

【讨论】：

虽然此代码可能会回答问题，但提供有关它如何和/或为什么解决问题的额外上下文将提高​​答案的长期价值。

【参考方案11】：

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');

块引用 : 你必须在 setHeader() 中添加 OPTIONS & Authorization

这个改动解决了我的问题，试试吧！

【讨论】：

这里应该提到，这必须在服务器代码中完成，而不是在 axios 中才能工作。