Node.JS OvernightJS Express CORS XMLHttpRequest 已被 CORS 策略阻止

Posted 2023-03-04

【中文标题】Node.JS OvernightJS Express CORS XMLHttpRequest 已被 CORS 策略阻止

【英文标题】：Node.JS OvernightJS Express CORS XMLHttpRequest has been blocked by CORS policy

【发布时间】：2021-04-24 00:45:40

【问题描述】：

我有一个用 Node.JS 开发的 API，Typescript 监听 localhost:3001 我在 Angular、Typescript 中有一个前端应用程序，正在监听 localhost:4200

我正在尝试使用 ngx-image-cropper 上传图像文件，将其转换为 base64，从前端到 API。

当 PATCH（更新）http 请求发送到 API 时，我得到：

从源“http://localhost:4200”访问“http://localhost:3001/member/10”处的 XMLHttpRequest 已被 CORS 策略阻止：Access-Control-Allow-不允许方法 PATCH预检响应中的方法。

我的 Overnight.JS Express 服务器配置如下：

const corsOpts1 = origin: '*' ;

this.app.use(
  cors(corsOpts1)
);

我尝试了几件事，没有成功。 例如，在我的类控制器之上，我添加了如下指令 ClassMiddleware：

@Controller('成员') @ClassMiddleware([cors()])

这是查看 Chrome 开发工具的回应：

我已经用完了所有选项。我在互联网上的广泛研究并没有为我提供成功的解决方案。

如果有人之前遇到过这个问题，我将不胜感激，您是如何解决的。非常感谢。

【参考方案1】：

看起来您的前端正在执行 Pre-Flight cors 请求。尝试在您的快速服务器上使用以下内容：

app.options('*', cors()) // include before other routes

请参阅express docs 了解更多信息（向下滚动到启用 CORS 飞行前）。