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

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

转到您的 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);
  })

Answer 3

首先，在您的后端应用（如快递应用）中，您必须启用cors

喜欢：

1. 运行命令npm i cors安装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 4

这可能是由于在 development 模式下来自 react 应用程序的 POST 请求。您可以通过在 ' 文件中添加以下代码行来绕过开发模式下的 CORS 策略。

{
    ...
    "proxy": "http://localhost:3000",
    ...
}

Answer 5

This article 很快解决了我的问题。

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

Answer 6

如果你在 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 7

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

简单来说，localhost 不能调用 ipify.org，除非它允许。似乎没有，我假设服务器不是由您管理的。因此，您唯一的选择是使用反向代理。你可以阅读how to create an http proxy with node here。

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

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

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

Answer 8

您似乎试图做的是告诉服务器它应该使用您在 Axios 调用中指定的 CORS 策略。这根本不是事情的工作方式——服务器定义了自己的 CORS 策略，您只需遵守它们。如果您尝试访问的服务器在其 CORS 策略中不支持 http://localhost:3000，则您无法将该源与 API 一起使用。

如果服务器是您的，请查看cors 包并将其配置为允许localhost:3000 作为来源。如果您不拥有该服务器，则在不询问服务器所有者是否愿意这样做的情况下，您无法真正更改任何 CORS 策略。