missing token ‘x-auth’ in CORS header ‘Access-Control-Allow-Headers’ from CORS preflight channel

Question

i want to get data with post method from axios package and xampp sever, i have an error when work with firefox :

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://127.0.0.1/aftab/inventory3/v1/repository/all. (Reason: missing token ‘x-auth’ in CORS header ‘Access-Control-Allow-Headers’ from CORS preflight channel).[Learn More] Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://127.0.0.1/aftab/inventory3/v1/repository/all. (Reason: CORS request did not succeed)

but when test it in chrome it work correctly and i don't have any error ,

my axios request code is:

let page = 1;
    let config =
        {
            'Content-Type': 'application/x-www-form-urlencoded',
            'x-auth': localStorage.getItem("token"),
        };
    let data = {page: page};
    if (localStorage.getItem("token")) {
        await axios({
            method: "post",
            url: "http://127.0.0.1/aftab/inventory3/v1/repository/all",
            data: data,
            headers: config
        }).then(function (response) {
            console.log(response);
        }).catch(function (error) {
            if (error.response) {
                cosole.log(response);
            } else if (error.request) {

               console.log(error.request);
            } else {

                console.log('Error', error.message);
            }
            console.log(error.config);
        });
    } else {
        localStorage.removeItem("token");
        // this.history.push('/log/in');
    }

in the firefox console :

firefox console

in firefox console network, only option method was sent and after it we dont have any request but in the chrome it work correct and we have a post method request after option method

seems Firefox does not recognize `*` as allowed value for `Access-Control-Allow-Headers`: https://stackoverflow.com/questions/52750589/access-control-allow-headers-set-to-but-still-failing-in-firefox — skyboyer, Feb 13 '19 at 09:15

score 0 · Answer 1 · answered Feb 13 '19 at 06:12

0

change your config to look like this

let config =
        {
            'Content-Type': 'application/x-www-form-urlencoded',
            'x-auth': localStorage.getItem("token"),
            'Access-Control-Allow-Origin': '*'
        };

and also enable cors on your server

answered Feb 13 '19 at 06:12

Dhaval Chheda

4,637
5
24
44

i add this config and enable cors but i have the same error,in addition my code work correctly in chrome browser and this means that my code and config and cors config is correct – alex heydari Feb 13 '19 at 06:19
when i set this config my error is : Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://127.0.0.1/aftab/inventory3/v1/repository/all. (Reason: missing token ‘access-control-allow-origin’ in CORS header ‘Access-Control-Allow-Headers’ from CORS preflight channel – alex heydari Feb 13 '19 at 06:34
1

The issue should be resolved with this header and cors enabling on the server and I would first check if this same request works on postman and if yes then I will remove 'Content-Type' header or change it to 'application/json' and also check the x-auth header as I am not sure if you are accepting the token on the x-auth header – Dhaval Chheda Feb 13 '19 at 07:06
1

adding `'Access-Control-Allow-Origin'` on client-side does nothing. – skyboyer Feb 13 '19 at 09:13

score 0 · Accepted Answer · answered Feb 13 '19 at 07:28

0

when we create a build from project this is work correctly in both chrome and firefox ,because in build edition of project option method don't send and we have only post method and it work on all browsers,It's like a bug in react

answered Feb 13 '19 at 07:28

alex heydari

41
5

score 0 · Answer 3 · answered Feb 13 '19 at 09:08

I have similar issue and checked my axios version and it was 0.18.0 POST request was working fine. However, GET request was not working with similar issue you have mentioned. Then I tried with beta version.

Try this beta version of axios ie 0.19.0-beta.1

https://github.com/axios/axios/tree/v0.19.0-beta.1

It fixes in my case.

 "axios": "0.19.0-beta.1"

Note : if you plan to use beta version. I hope it should work.

missing token ‘x-auth’ in CORS header ‘Access-Control-Allow-Headers’ from CORS preflight channel

3 Answers3