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

User · Answer

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.

User · Answer

Try this    axios get      url       headers             name     value                       then  response    gt          var response   response data              error    gt          var status   error response status

User · Answer

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  amp  Authorization to the setHeader      this change has fixed my problem  just give a try

User · Answer

Instead of calling axios get function Use   axios   method   get   url   your URL   headers    Authorization   Bearer   token

User · Answer

You can try this   axios get      url       headers                 Access-Control-Allow-Origin                      Content-type    Application json                Authorization    Bearer   your-token                                     then  response    gt          var response   response data              error    gt          var status   error response status

User · Answer

This has worked for me   let webApiUrl    example com getStuff   let tokenStr    xxyyzz   axios get webApiUrl    headers    Authorization     Bearer   tokenStr

User · Answer

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

User · Answer

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

User · Answer

Rather than adding it to every request  you can just add it as a default config like so   axios defaults headers common  Authorization      Bearer   access token

[javascript] How to send authorization header with axios

Examples related to javascript

Examples related to axios