ReactJS-PHP GET请求已被CORS策略阻止

Question

i have a reactjs app and a php api all on my local system. i run a post fetch function and this works fine and i become the response from server

let formData = new FormData();
    formData.append('username', username);
    formData.append('password', password);

    fetch('http://api.**********/users/login', {
        method: 'post',
        body: formData
    }).then(function(response) {
        return response.json();
    }).then(function(data) {
        console.log(data);
    });

and now i have second request on a other site

fetch('http://api.*******', {
        method: 'get',
        headers: {
            'X-API-TOKEN':token 
        }
    }).then(function(response) {
        console.log(response.body);
        //return response.json();
    }).then(function(data) {
        //console.log(data);
    });

but by the second function i get this error:

Access to fetch at ' http://api .*********' from origin ' http://localhost:3000 ' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

i dont want to use the proxy. but i dont understand why the function works with post on the first site and i get this error on the seconds site with the same function. on the php server this is active

header("Access-Control-Allow-Origin: *");

Answer 1

It's not about the same function doesn't complain about CORS in the first case but it complains about second request. It has to do with the domain (origin and source) you are trying to access. I suggest you read up on CORS here to get a better understanding and how browsers enforce it.

I think the POST request is for the same domain and GET is for a different one. You didn't specify the domains (even a fake one to distinguish them so I'm assuming they are different). The error is coming from the browser because you're basically on Domain A and trying to access Domain B resource with your fetch request. When browser notices that, it will first try an OPTION request to figure out if Domain B allows CORS and what methods are available. If CORS isn't available it shows the error you're getting above.

Your web server should also allow CORS support apart from setting the proper headers. Check out this link on how you can do so for various web servers.

I hope this helps. Good luck.