IT技术 - CORS 策略已阻止从源“localhost:3000”访问“...”处的 XMLHttpRequest - 吾爱随笔录

CORS 策略已阻止从源“localhost:3000”访问“...”处的 XMLHttpRequest

IT技术 reactjs cors axios

2021-05-16 04:10:51

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

我正在进行以下 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);

这会引发错误：

Access to XMLHttpRequest at 'https://api.ipify.org/?format=json' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

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

4个回答

如果你在 nodejs 中构建你的 rest api。按照以下简单步骤操作

停止 Node.js 服务器。

npm install cors --save

将以下行添加到您的 server.js 或 index.js

var cors = require('cors')

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

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

很多天后，我终于找到了解决方案。而不是像这样简单地使用 CORS

const cors = require('cors');

app.use(cors());

在您的服务器 index.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));

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

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

你需要的是让你的应用程序在一个假的/存根的主机上提供服务，而不是本地主机：

local.development.ipify.org -> 代理 localhost:3000

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

这篇文章很快解决了我的问题。

您可以进行的最快修复是安装moesif CORS 扩展。安装后，在浏览器中单击它以激活扩展。确保图标的标签从“关闭”变为“开启”

其它你可能感兴趣的问题

上一篇在 react-router v4 中为不同的路由路径使用相同的组件下一篇现实生活中的步进速度