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;
This is my axiosConfig;
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
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:
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 acceptdata
object@Khaledgarbaya This alias method does not work with Authorization header
But this way, it does work
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. ListIf you’re still having issues, try using
axios({method: yourMethod})
instead ofaxios.yourMethod()
.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 ofaxios.yourMethod()
.Method signature reminder (comment)
Reminder: Don’t forget that the signature for
axios.post
,.put
and.patch
requiresdata
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.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. ListStill 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
but not when using
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. ListIf you’re still having issues, try using
axios({method: yourMethod})
instead ofaxios.yourMethod()
.If none of these fixes your issue, please open a new one. @emilyemorehouse @mzabriskie @nickuraltsev @rubennorte please consider locking comments on this 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
@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
My cors configuration is fine as seen below
but the Authorization value is not attached to the request. I tried with the global configuration but same problem