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

Question

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

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

Answer 1

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

Answer 2

很多天后，我终于找到了解决方案。而不是像这样简单地使用 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));

Answer 3

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

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

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

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

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

Answer 4

这篇文章立刻解决了我的问题。

\n\n

\n

您可以采取的最快修复方法是安装moesif CORS 扩展。安装后，在浏览器中单击它以激活扩展程序。确保图标\xe2\x80\x99s标签从\xe2\x80\x9coff\xe2\x80\x9d到\xe2\x80\x9con\xe2\x80\x9c

\n

\n

Answer 5

首先，在您的后端应用程序（例如 Express 应用程序）中，您必须启用cors

喜欢 ：

1. 运行命令安装 cors npm i cors
2. 然后转到您的 server.js 或 app.js 或 index.js 文件并添加

• var cors = require('cors');
• app.use(cors())

3.cors将使您的客户端或前端应用程序能够访问您的后端路由。最后转到您的路线并在获取路线内粘贴以下行

• router.get("/", (req, res) => {
• res.setHeader("Access-Control-Allow-Origin", "*")
• res.setHeader("Access-Control-Allow-Credentials", "true");
• res.setHeader("Access-Control-Max-Age", "1800");
• res.setHeader("Access-Control-Allow-Headers", "content-type");
• res.setHeader( "Access-Control-Allow-Methods", "PUT, POST, GET, DELETE, PATCH, OPTIONS" );
• });

` 我也遇到了这个问题 2 个小时，我这样解决了我的问题。所以希望这对你有帮助

Answer 6

转到您的 package.json 文件并添加： "proxy": "your-api-url" 但仅添加开头/基础，例如，如果您使用的是 pokemon api，则只需设置 "proxy" : "https ://pokeapi.co/api/v2”，在您的服务文件中，您可以使用 axios 和您需要的路径：

axios.get("/pokemon?limit=1000")
  .then(response => {
    resolve(response.data.results);
  })