node.js - 从源 '...' 访问位于 'localhost:3000' 的 XMLHttpRequest 已被 CORS 策略阻止

Question

编辑

有点晚了，但我记得我最终通过在后端的 cors 配置中设置 credentials: true 解决了这个问题。

完全偶然，我注意到如果我在前端的 axios 客户端中设置 credentials: false，一切都会正常工作。但是，将其切换为 true 仍然会引发错误。然后，我将两个和两个放在一起，并在后端设置 credentials: true ，一切都按预期工作。

我的应用程序使用了 cookie，因此必须以这种方式完成。

<小时/>

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

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

这会引发错误:

从源“http://localhost:3000”访问“https://api.ipify.org/?format=json”处的 XMLHttpRequest 已被 CORS 策略阻止:对预检请求的响应不会“无法通过访问控制检查:请求的资源上不存在“Access-Control-Allow-Origin” header 。

当我将应用程序部署到 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 调用，它应该可以工作