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

Posted 2023-03-10

【中文标题】尝试在已部署的反应客户端和快速服务器上上传图像文件时出现 503 错误，然后是 CORS 错误

【英文标题】：503 error when trying to upload image file on deployed react client & express server, followed by CORS error

【发布时间】：2021-07-15 14:27:04

【问题描述】：

我正在尝试发出一个 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; ......;

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

【参考方案1】：

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

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

如果有效，别忘了把“*”改成访问该服务器的授权IP或域客户端。

【讨论】：

另外我认为可能还有另一个问题。在本地开发中，我将图像保存在 src/images 中。 if (file) fileName = name + Math.random() + '.jpg';等待管道(file.stream, fs.createWriteStream($__dirname/../images/$fileName));

我使用 express static 在我的 react 应用程序中访问此文件夹 (img src=$baseUrl/static/imagename)。服务器 ts: app.use('/static', express.static(path.join(__dirname, 'images')));我认为在构建和部署之后，服务器将无法找到我的图像文件夹，因为它在我的构建文件夹中不存在。我不知道如何解决...

【参考方案2】：

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