尝试在已部署的 React 客户端和 Express 服务器上上传图像文件时出现 503 错误，然后是 CORS 错误

问题描述

我正在尝试发出一个 POST 请求，其中包含请求正文 json 和一个文件。为此，我在我的快递服务器中使用了 multer 并启用了 cors（app.use(cors()）。不幸的是，这个 POST 请求在 deployed 应用程序中不起作用，我得到了这个 CORS错误： Access to XMLHttpRequest at 'https://....server.herokuapp...' from origin 'https://...client...herokuapp...' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

我已经尝试了所有方法，但对我不起作用... 当我从 chrome 扩展 (cors chrome extension) 启用 cors 时，我收到 503 服务器错误。

这是我的 server.ts 文件： enter image description here

POST 方法： routerExample.post("/create",upload.single('file'),async (req,res) => { const { file,body: { name,hostemail,hostPhoneNumber,about,location } } = req; ......;

仅供参考：我对本地开发没有任何问题

解决方法

您的 cors 配置不会在标头响应 (credentials: true) 中发送“Access-Control-Allow-Origin”，也不会授权来自外部源 IP 的访问（origin: "* ")。要实现这些，请尝试将 cors 配置更改为：

app.use(
  cors({
    credentials: true,origin: "*",})
);

如果成功，不要忘记将“*”更改为访问此服务器的授权IP或域客户端。

,

我解决了！主要问题是在服务器端保存图像。我将图像保存在 src/images 中，当我部署应用程序时，我的路由没有找到图像所在的路径。所以我不得不在我的服务器项目目录中创建一个公共文件夹并将图像存储在这里。