时间戳

首页 > 解决方案 > CORS 策略已阻止从源“localhost:3000”访问“...”处的 XMLHttpRequest

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

问题描述

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

我正在进行以下 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 调用按预期工作。但是，在我的本地机器上开发时它不起作用。不知道我在这里缺少什么。

标签： reactjscorsaxios

解决方案

如果你在 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 调用，它应该可以工作

推荐阅读