CORS policy: Request header field access-control-allow-origin is not allowed by Access-Control-Allow-Headers in preflight response when using axios

Question

I am using axios to call api and bearer token way for authorization, my code:

export default axios.create({
    baseURL,
    headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer  ${localStorage.getItem('token')}`
    }
});

in UserRepository.js, the Repository is imported and the api be called by:

loadUsers() {
    return Repository.get(`${users}`);
}

Then the error is "unauthorization", but when I update the header:

export default axios.create({
    baseURL,
    headers: {
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Methods': 'GET, PUT, POST, DELETE, OPTIONS',
        'Content-Type': 'application/json',
        'Authorization': `Bearer  ${localStorage.getItem('token')}`
    }
});

The error is: Access to XMLHttpRequest at 'http://example.com/users' from origin 'http://localhost:8080' has been blocked by CORS policy: Request header field access-control-allow-origin is not allowed by Access-Control-Allow-Headers in preflight response.

`Access-Control-Allow-Origin` and `Access-Control-Allow-Methods` are **response headers**. You do not add them to your request — Phil, Jun 25 '19 at 04:20
Is `localStorage.getItem('token')` actually set when you create your Axios instance? If not, you should use an interceptor instead. You can inspect the request headers in your browser's _Network_ console — Phil, Jun 25 '19 at 04:21
I checked the request by the network in browser, the token is okay — Phạm Hoàng Tuyết Ngân, Jun 25 '19 at 04:26
It seems your API disagrees. It could be because you have an extra space between _"Bearer"_ and your token. What made you think to add `Access-Control-Allow-Origin`, etc to your request headers? What **exactly** is the response / error message? A screenshot from your _Network_ console might help — Phil, Jun 25 '19 at 04:29

score 1 · Answer 1 · answered Aug 30 '19 at 08:19

The error you are getting is because the server is responsible for reporting the allowed origins. If your server was an express server you would use this piece of code to resolve this error:

`

app.use(function (req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    next();
});

`

see here for more info.

score -2 · Answer 2 · answered Jun 25 '19 at 04:24

-2

This part of the code should be in your api not not the client. It is part of the response headers.

'Access-Control-Allow-Origin': '*',
  'Content-Type': 'application/json',

answered Jun 25 '19 at 04:24

Saif Kamaal

186
8

1

Nothing wrong with `Content-type` as a request header (for POST, PUT, etc requests) – Phil Jun 25 '19 at 05:42

CORS policy: Request header field access-control-allow-origin is not allowed by Access-Control-Allow-Headers in preflight response when using axios

2 Answers2