时间戳

首页 > 解决方案 > ReactJS - PHP GET 请求已被 CORS 策略阻止

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

问题描述

我的本地系统上有一个 reactjs 应用程序和一个 php api。我运行一个 post fetch 功能，这工作正常，我成为服务器的响应

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

但是通过第二个函数，我得到了这个错误：

CORS 策略阻止了从源“ http://localhost:3000 ”获取“ http://api.********* ”的访问权限：对预检请求的响应未通过访问控制检查: 它没有 HTTP ok 状态。

我不想使用代理。但我不明白为什么该功能适用​​于第一个站点上的帖子，而我在具有相同功能的第二个站点上收到此错误。在 php 服务器上这是活动的

header("访问控制允许来源：*");

标签： phpreactjs

解决方案

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

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

除了设置正确的标头之外，您的 Web 服务器还应该允许 CORS 支持。查看此链接，了解如何为各种 Web 服务器执行此操作。

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

推荐阅读