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

更新 ：

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

但是我能够理解错误消息并修复了我的 axios 请求代码中的错误，它应该如下所示

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

Answer 1

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

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

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

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

Answer 2

这对我有用：

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

Answer 3

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

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

Answer 4

尝试这个 ：

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

Answer 5

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

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

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

Answer 6

而不是调用 axios.get 函数使用：

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

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

Answer 8

为您的请求创建一个新的 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)

Answer 9

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

这使它起作用：

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

原文链接

Answer 10

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 ：您必须将 OPTIONS & Authorization 添加到 setHeader()

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

Answer 11

Derric的页面对描述CORS，预检和GET请求的工作方式非常有帮助，尤其是在您尝试将GET与授权标头一起使用的情况下。 https://www.moesif.com/blog/technical/cors/Authoritative-Guide-to-CORS-Cross-Origin-Resource-Sharing-for-REST-APIs/#

我无法使用任何Chrome浏览器插件，但是我无法在没有安全性且没有CORS的情况下启动Chrome，因此预检请求不会与GET + Authorization标头一起发送。

在Windows 10上，命令为：

“ C：\\ Program Files（x86）\\ Google \\ Chrome \\ Application \\ chrome.exe” --disable-web-security --disable-gpu --user-data-dir =〜/ chromeTemp

感谢： https : //alfilatov.com/posts/run-chrome-without-cors/

Answer 12

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