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

Question

我在我的本地系统上都有一个reactjs应用程序和一个php API。 我运行后提取功能，并且工作正常，并且我成为服务器的响应

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);
    });

现在我在另一个站点上有第二个请求

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);
    });

但是通过第二个功能我得到这个错误：

从源“ http：// localhost：3000 ”访问“ http：// api 。*********”处的访存已被CORS策略阻止：对预检请求的响应未通过访问控制检查：它没有HTTP正常状态。

我不想使用代理。 但我不明白为什么该功能可以在第一个网站上发布，并且我在第二个网站上使用相同的功能得到此错误。 在PHP服务器上这是活跃的

header（“ Access-Control-Allow-Origin：*”）;

Answer 1

它与同一个函数无关，在第一种情况下不会抱怨CORS，但会抱怨第二个请求。 它与您要访问的域（源和源）有关。 我建议您在此处阅读CORS ，以更好地了解以及浏览器如何执行它。

我认为POST请求针对相同的域，而GET请求针对不同的域。 您没有指定域（即使是伪造的域也可以区分它们，所以我假设它们是不同的）。 该错误来自浏览器，因为您基本上位于域A上，并尝试通过获取请求访问域B资源。 当浏览器注意到这一点时，它将首先尝试一个OPTION请求，以确定域B是否允许CORS以及可用的方法。 如果CORS不可用，则会显示您遇到的错误。

您的网络服务器除了设置适当的标题外，还应允许CORS支持。 查看此链接 ，了解如何针对各种Web服务器执行此操作。

我希望这有帮助。 祝好运。