axios: axios doesn't see request headers that I set

Hi,

I tried to make a CORS API post call using axios but I’ve been never able to do that because I must set headers to make a proper call however axios doesn’t see the headers I set.

For example,

This is what I set as URL and Headers;

    DASHBOARDS_LIST: {
        URL: "http://10.254.147.184:11103/api/1.0/devices/",
        HEADERS: {
          "Content-Type": "application/json",
          "Authorization": "Bearer 700e9323-0140-4d49-b574-e8652fa433ad"
        }
    }

The request is sent successfully so I don’t write the code where I call axios. The problem is I couldn’t set the headers.

This is the request pic;

image

This is my axiosConfig;

image

Even if I set “Authorization”, I don’t know why it is not shown in my request.

About this issue

  • Original URL
  • State: closed
  • Created 7 years ago
  • Reactions: 28
  • Comments: 58

Most upvoted comments

I’d like to say that I’ve encountered this error and solved it doing the following: Instead of doing: return axios.get(api + '/api/user/getUserInfo', { params: { UserId: 1 } }, config)

Where

config = { headers: { 'Authorization': 'Bearer ' + accessToken } }

I did:

return axios({ method: 'get', url: api + '/api/user/getUserInfo?UserId=1', headers: { 'Authorization': 'Bearer ' + accessToken } })

And it worked. I hope to help someone with this. Cheers!

Isn’t this just a CORS problem?

You need to add CORS-specific response headers on your server side:

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, PUT, DELETE
Access-Control-Allow-Headers: Authorization

Some comments here indicate that this is a CORS issue from the server side, yet I can submit the same request perfectly using a different client in Python, sending the same authorization header and same data.

Yet it will not work with Axios.

I am still getting the same problem

@dmitrij-onoffapp get fundtion does not accept data object

var config = {
    headers: { 'Authorization': 'Bearer ksdjfglksgflksgsjdhglaslfkhgasf' }
}

return axios.get(url, config)

@Khaledgarbaya This alias method does not work with Authorization header

var config = {
    headers: { 'Authorization': 'Bearer ksdjfglksgflksgsjdhglaslfkhgasf' }
}

return axios.get(url, data, config)

But this way, it does work

return axios({
    method: 'get',
    url: url,
    headers: { 'Authorization': 'Bearer ' + accessToken }
})

Reposting workaround so it doesn’t get lost in thread.

If you’re having issues with authorization header not being sent by Axios, please check that you have the correct headers set:

  • Access-Control-Allow-Origin: *, or just your origin.
  • Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS, HEAD or just the method you’re using. * not allowed here.
  • Access-Control-Allow-Headers: Authorization and any other headers you wish to include. * not allowed here. List

If you’re still having issues, try using axios({method: yourMethod}) instead of axios.yourMethod().

axios.put(url, {headers: headers, params: params}) //'authorization' header not sent
axios({method: 'put', url: url, headers: headers, params: params}) //'authorization' header sent

If none of these fixes your issue, please open a new one.

Reposting summary of solutions & workarounds so they doesn’t get lost in thread.

TL;DR

Use axios({method: yourMethod}) instead of axios.yourMethod().

axios.put(url, {headers: headers, params: params}) //'authorization' header not sent
axios({method: 'put', url: url, headers: headers, params: params}) //'authorization' header sent

Method signature reminder (comment)

Reminder: Don’t forget that the signature for axios.post, .put and .patch requires data as the second parameter, so trying to put headers as the second parameter will cause them to be sent as POST data, not as headers.

axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])

CORS

If you’re still having issues with authorization header not being sent by Axios, please check that you have the correct headers set:

  • Access-Control-Allow-Origin: *, or just your origin.
  • Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS, HEAD or just the method you’re using. * not allowed here.
  • Access-Control-Allow-Headers: Authorization and any other headers you wish to include. * not allowed here. List

Still not working?

If none of these fixes your problem, please open a new issue. Your problem is unrelated to this issue, DO NOT post in this issue.

I solved my issue using: Axios.get(url,header,params) => Axios.get(‘http://localhost/api/’, {headers: {‘Authorization’:'Token ’ + tokenhere} }, params)

my code before w/c was not working was these format: Axios.get(url, params,header) => Axios.get(‘http://localhost/api/’, params, {headers: {‘Authorization’:'Token ’ + tokenhere} })

I’m having the same experience with setting headers. Headers are set when using

axios({method: ‘post’ …

but not when using

axios.post({ …

I have the same problem and @pedro-rates solution didn’t fix it. 😦

I had the same issue. This Issues https://github.com/axios/axios/issues/969 helped me resolve the problem.

Ideally, the Axios post expects to have data passed as a parameter. Therefore, if you only pass URL and headers, the headers are treated as data. Pass a null option if you don’t have data to pass to the post request.

axios.post(url, null, headers)

I’m now doubting if I need to use the Delete method to logout instead of the Post Method.

In some environment axios don’t see the header. We can fix this issue from back-end side No need to do anything from front-end side.

just download this package: https://www.npmjs.com/package/cors and added to your application. #node Js

@barmaley443 nice. It’s hard to keep up with these specs.

Reposting workaround for newcomers…If you’re having issues with authorization header not being sent by Axios, please check that you have the correct headers set:

  • Access-Control-Allow-Origin: *, or just your origin.
  • Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS, HEAD or just the method you’re using. * not allowed here.
  • Access-Control-Allow-Headers: Authorization and any other headers you wish to include. * not allowed here. List

If you’re still having issues, try using axios({method: yourMethod}) instead of axios.yourMethod().

axios.put(url, {headers: headers, params: params}) //'authorization' header not sent
axios({method: 'put', url: url, headers: headers, params: params}) //'authorization' header sent

If none of these fixes your issue, please open a new one. @emilyemorehouse @mzabriskie @nickuraltsev @rubennorte please consider locking comments on this issue.

* is only allowed for origins, deciding which headers are allowed to be sent is a separate process, and * is not allowed for headers. See https://stackoverflow.com/a/33704645/675721 . The RFC you quote uses it for Access-Control-Allow-Origin, not for Access-Control-Allow-Headers. Refer to the flow in https://www.w3.org/TR/2014/REC-cors-20140116/ . Regardless, if you feel that this is a bug in axios, please open a new issue.

i think you are right at this point. FYI https://github.com/whatwg/fetch/issues/251 https://bugzilla.mozilla.org/show_bug.cgi?id=1309358

i think it’s right to see rfc 😃 https://tools.ietf.org/html/rfc7480

A value of “*” is suitable when RDAP is used for public resources.

@Khaledgarbaya still an issue.

axios.put(url, {headers: headers, params: params}) //headers are not sent

Thanks @dmitrij-onoffapp for providing the workaround axios({method: 'put', url: url, headers: headers, params: params}) //headers are sent

Tested on Axios 0.18.0

I have the same problem, here is my code

axios({ 
                url: '/games/homelist',
                method:'get',
                headers : {
                    Authorization : "Bearer eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJ0b3RvIiwiZXhwIjoxNDk1ODI5NDA3fQ.O2xvqz15TwxdKxB0aTxm32ySdrcZjf_fsJB3FdUV1ESwWZ3bW4PKPWgm3RI6SPMeaX6Hh0Bdjirgyp4FkdPeRQ"
                }
            })
            .then((response) => {
                this.gamesInfos = response.data
            })
            .catch(function(error) {
                console.log(error)
            });

My cors configuration is fine as seen below

image

but the Authorization value is not attached to the request. I tried with the global configuration but same problem