CORS 阻止 Expressjs 中的文件上传

Posted 2023-03-04

【中文标题】CORS 阻止 Expressjs 中的文件上传

【英文标题】：CORS blocking file uploads in Expressjs

【发布时间】：2020-07-08 22:10:12

【问题描述】：

我尝试手动添加标题并使用 express cors。

我读过这个：https://expressjs.com/en/resources/middleware/cors.html

按照说明进行操作，一切都很好，我发送的每个请求 [GET, PUT, POST,DELETE,PATCH] 都通过了，但是。如果我尝试将文件上传到服务器 CORS 阻止了我。

消息：

从源“https://app.example.xyz”访问“https://api.example.xyz/api/post”处的 XMLHttpRequest 已被 CORS 策略阻止：请求的资源上不存在“Access-Control-Allow-Origin”标头。

但是如果我从请求正文中删除了处理移动文件的任何内容，CORS 块就会消失。

我已经尝试过 multr 、 express-fileupload 和使用节点 fs 手动移动图像，cors 总是阻止我。 请帮忙。

如何使用 express 上传文件？这是我的服务器故障吗？它适用于本地。

【问题讨论】：

*** 上有关代码的所有问题都应显示实际代码的相关部分。这使我们能够更快、更准确、更具体地为您提供帮助，而无需猜测您在做什么或不做什么。有关代码的问题应包括该代码。

【参考方案1】：

这可能是因为有两种 COR 请求，“简单请求”和“预飞行”请求。你没有显示你的代码（你应该），但你的症状听起来你正在处理 simple requests 就好了，但你的上传触发了 pre-flighted request 并且你没有预飞行的 CORS 批准代码请求。

预检请求在发送实际请求并请求许可之前发送一个 OPTIONS 请求，并且您的服务器需要正确响应带有 CORS 标头的 OPTIONS 请求，以允许浏览器发送预检请求。

您可以通过打开 Chrome 调试器并转到网络选项卡并查看浏览器在此请求期间向您的服务器发送的确切内容来确定发生了什么。

如果这个解释不足以让您弄清楚如何解决您的问题，那么请显示您的浏览器尝试发送该请求的网络选项卡中的确切屏幕截图，并显示您的服务器代码的相关部分，两者您的 COR 中间件和目标请求处理程序。