被 CORS 策略阻止：对预检的响应...没有 HTTP ok 状态。标头没有解决问题

Posted 2023-03-04

【中文标题】被 CORS 策略阻止：对预检的响应...没有 HTTP ok 状态。标头没有解决问题

【英文标题】：Blocked by CORS policy: Response to preflight... does not have HTTP ok status. Headers didn't solve the problem

【发布时间】：2021-05-16 09:43:03

【问题描述】：

伙计们！我正在通过构建任务管理器应用程序来练习 MEAN 堆栈开发，目前遇到了 CORS 问题。我似乎已经通过整个互联网尝试不同的解决方案，并从一个问题转到另一个问题。目前停留在这个：

Access to XMLHttpRequest at 'http://localhost:3000//lists/602676b56197c004f12bbeaf/tasks/602676be6197c004f12bbeb0' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

我已经在我的代码中说明了这一点（但它并没有解决问题：

app.use(function (req, res, next) 
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Methods", "GET, POST, HEAD, OPTIONS, PUT, PATCH, DELETE");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    next();
);

我也尝试过使用浏览器扩展，通过终端禁用网络安全，但没有解决问题，而且我记得，在我之前的项目中使用代理并没有帮助...

以防万一 - 这是我的一个请求的样子：

app.patch('/lists/:listId/tasks/:taskId', (req, res) => 
    Task.findOneAndUpdate(
            _id: req.params.taskId,
            _listId: req.params.listId
        , 
            $set: req.body
        
    ).then(() => 
        res.sendStatus(200);
    )
);

我做错了什么吗？还有什么我应该注意和尝试的？ 处理后端对我来说很难，因为这是我第一次这样做......

无论如何，我希望有人能在这个问题上启发我，我将不胜感激！

干杯！

【问题讨论】：

我帮不了你，但根据我的经验，我在补丁请求上禁用 CORS 没有成功。只需将它们更改为 POST 并继续。

@ChrisR 查看给出的答案，它对我有用，希望它对你也有帮助？？？？

【参考方案1】：

试试 cors 包

安装 npm

npm i cors --save

然后

const express = require('express');
const bodyparser = require('body-parser');
const cors = require('cors');

app.use(cors());
....

这将允许 cors 无处不在，希望它有所帮助，并确保 app.use(cors()) 是最重要的。

【参考方案2】：

不要自己实现 cors 功能。使用库

npm install --save cors
....
var cors = require('cors')
var app = express()

app.use(cors())

【讨论】：

谢谢！为我工作！?