CORS 政策问题答案

【问题标题】：CORS policy issueCORS 政策问题
【发布时间】：2020-12-23 04:55:01
【问题描述】：

我在一个开发客户端-服务器应用程序的团队中。我们在后端使用 Node.js (v12.18) 作为 API，在前端使用 React (v16.13)。最近我发现了这个与 CORS 策略相关的错误。我正在尝试发送 POST 请求，删除数据库中的一个资源，当尝试删除它时，这是我得到的错误：

CORS 策略已阻止从源“http://localhost:3000”获取“http://localhost:8080/clientes/eliminar”的访问权限：对预检请求的响应未通过访问控制检查：它没有 HTTP ok 状态。

就我在论坛和讨论中的研究而言，我总是找到相同的解决方案，即使用“Access-Control-Allow”标题，但我们已经在使用它们。在执行请求时，我尝试通过 DELETE 方法更改 POST 方法，但我发现了同样的问题。

我们当前在后端使用的标头，以防有人想知道我们有什么。

app.use(function (req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Credentials", "true");
    res.header("Access-Control-Allow-Methods", "GET, POST");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, token");
    next();
});

我为解决问题而访问的网站与this one几乎相同

TYSM 供您阅读直到这里，并询问您需要的更多信息。感谢您的每一份帮助。

【问题讨论】：

最有可能的是，在您的 CORS 中间件运行之前发生了错误。请发布请求和响应标头，以便我们查看。
您可能想要安装和使用 npm cors 包，特别是查看npmjs.com/package/cors#enabling-cors-pre-flight 的文档部分。问题中显示的代码没有处理 CORS 预检 OPTIONS 请求。仅处理“Access-Control-Allow-*”响应标头本身不足以确保服务器正确响应 CORS 预检 OPTIONS 请求。

标签： node.js reactjs cors

【解决方案1】：

您是否已经尝试将 CORS 添加到项目中并将其用作中间件？

//...

const cors = require('cors')

//...


app.use(cors())

【讨论】：