How to send authorization header with axios

Question

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

Answer 1

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.

Answer 2

This has worked for me:

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

Try this :

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

Answer 5

You are nearly correct, just adjust your code this way

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

notice where I place the backticks, I added ' ' after Bearer, you can omit if you'll be sure to handle at the server-side

Answer 6

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

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

Answer 7

You can try this.

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

create a new axios instace for your request

  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

Install the cors middleware. We were trying to solve it with our own code, but all attempts failed miserably.

This made it work:

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

Original link

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 : you have to add OPTIONS & Authorization to the setHeader()

this change has fixed my problem, just give a try!

Answer 11

Derric's page is very helpful to describe how CORS and preflight and GET requests work, especially in the circumstances where you are try to use a GET with an authorization header. https://www.moesif.com/blog/technical/cors/Authoritative-Guide-to-CORS-Cross-Origin-Resource-Sharing-for-REST-APIs/#

I wasn't able to get any of the chrome brower plugins to work, however I was able to start Chrome without security and with out CORS, so the preflight request is NOT sent with the GET+Authorization header.

On Windows 10 command will be:

"C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe" --disable-web-security --disable-gpu --user-data-dir=~/chromeTemp

Thanks to: https://alfilatov.com/posts/run-chrome-without-cors/

Answer 12

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