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

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

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

您需要的是将应用程序提供给伪造/存根的主机，而不是本地主机：

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

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

Answer 3

您似乎想要做的就是告诉服务器它应该使用您在Axios调用中指定的CORS策略。这根本不是事情的运行方式-服务器定义了自己的CORS策略，您只需遵守这些策略即可。如果您要访问的服务器在其CORS策略中不支持http://localhost:3000，则不能在API中使用该来源。

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

Answer 4

This article立即解决了我的问题。

最快的解决方法是安装moesif CORS extension。安装后，在浏览器中单击它以激活扩展。确保图标的标签从“关闭”变为“打开”

Answer 5

如果要在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 6

转到您的package.json文件并添加： “ proxy”：“您的api-url”，但仅以开头/结尾，例如，如果您使用的是神奇宝贝api，则只需设置“ proxy”：“ https://pokeapi.co/api/v2” 在服务文件中，可以将axios与所需的路径配合使用：

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

Answer 7

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

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

Answer 8

首先，在像Express应用这样的后端应用中，您必须启用cors

like：

运行命令npm i cors
然后转到您的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" );
});

` 我也经历了两个小时的时间来解决这个问题，并像这样解决了我的问题。因此希望对您有帮助

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

8 个答案: