CORS策略已阻止从源localhost:3000访问XMLHttp请求

Question

有点晚了，但我记得我最终通过在后端的cors配置中设置凭据：true来解决这个问题。

完全偶然地，我注意到如果我在前端的axios客户端中设置凭据：假，一切都正常工作。然而，将其切换到true不断抛出错误。然后我把两个和两个放在一起，在后端设置凭据：true，一切都按预期工作。

我的应用程序使用cookie，所以必须这样做。

这可能是重复的，但我没有找到与我的问题相关的线索。

我正在进行以下API调用：

const config = {
  headers: {
    "Access-Control-Allow-Origin": "*",
    "Access-Control-Allow-Methods": "GET,PUT,POST,DELETE,PATCH,OPTIONS"
  }
};

const {
  data: { ip }
} = await axios.get("https://api.ipify.org?format=json", config);

这会引发一个错误：

CORS 策略已阻止从源“http://localhost:3000”访问位于“https://api.ipify.org/?format=json”处的 XMLHttpRequest：对预检请求的响应未通过访问控制检查：请求的资源上不存在“访问控制-允许源”标头。

当我将我的应用程序部署到Heroku时，API调用按预期工作。但是，在我的本地机器上进行开发时，它不起作用。不确定我在这里错过了什么。

Answer 1

您不能真正从具有不同主机名的服务器获取数据，这些服务器没有CORS策略来允许来自您的域的请求。

简而言之，localhost不能调用ipify。org，除非它允许。它似乎没有，我假设服务器不是由您管理的。因此，您唯一的选择是使用反向代理。您可以在这里阅读如何使用节点创建http代理。

你需要的是让你的应用服务于一个假的/存根主机，而不是本地主机:

local.development.ipify.org -

这样，当您进行 api 调用时，您与 ipify.org 位于同一域下，并且不会遇到任何 CORS 问题。

Answer 2

过了许多天，我终于找到了解决办法。而不是像这样简单地使用CORS

const cors = require（'cors'）;

app.use（cors（））

在您的服务器索引中.js使用 CORS 选项将解决问题，现在您可以传递 cookie 或其他凭据

const cors = require('cors');
const corsOptions ={
    origin:'http://localhost:3000', 
    credentials:true,            //access-control-allow-credentials:true
    optionSuccessStatus:200
}
app.use(cors(corsOptions));

Answer 3

如果您在nodejs中构建rest api。遵循以下简单的步骤

停止节点。js服务器。

npm install cors --save

将以下行添加到服务器.js或索引.js

var cors = require('cors')

app.use(cors()) // Use this after the variable declaration

现在尝试在客户端进行api调用，它应该可以工作