React搭配Express+Multer上传文件时response.ok恒为false问题求助

• 核心问题是你在fetch配置中加了mode: "no-cors"：该模式下浏览器仅允许请求发送成功，但是返回的响应是*不透明（opaque）*类型，无法读取响应状态、响应体等任何内容，所以response.ok固定为false，也拿不到返回的图片地址。
• 去掉no-cors配置后会触发跨域错误：你的React前端和Express服务端端口不同，属于跨域请求，服务端未配置跨域资源共享（CORS）规则，浏览器会拦截响应。
• 另外路由代码存在小缺陷：无匹配文件时仅设置了422状态码，没有结束响应，会导致请求挂起。

1. 修改React客户端fetch配置
   删除mode: "no-cors"字段，同时增加读取响应体的逻辑：

const uploadImage = async (img) => {
  const formData = new FormData();
  formData.append("image", img);
  try {
    const response = await fetch(
      "http://localhost:3002/admin/uploadImage",
      {
        method: "POST",
        body: formData,
      }
    );
    // 读取返回的图片地址
    const imageUrl = await response.text();
    console.log("上传成功，图片地址：", imageUrl);
  } catch (error) {
    setError(error.message);
  } finally {
    setIsLoading(false);
  }
};

2. Express服务端配置CORS
   首先安装cors依赖：
   npm install cors
   然后修改服务端入口代码，引入并使用cors中间件：

const express = require("express");
const multer = require("multer");
const path = require("path");
const cors = require("cors"); // 引入cors

const app = express();
const adminRoutes = require("./routes/admin");

app.use(cors()); // 全局启用cors，放在所有路由前面
// 后续原有配置保持不变

3. 优化admin路由逻辑
   修正响应逻辑，同时返回可直接访问的静态资源地址：

router.post("/uploadImage", (req, res, next) => {
  const image = req.file;
  if (!image) {
    // 错误时返回状态码+提示，结束响应
    return res.status(422).send("上传的文件格式不符合要求");
  }
  // 拼接完整可访问的静态地址
  const imageUrl = `http://localhost:3002/${image.path}`;
  console.log(imageUrl);
  res.send(imageUrl);
});

你当前遍历文件上传时没有等待异步请求完成，isLoading状态会提前结束，可修改为：

await Promise.all(Array.from(imageFiles).map(image => uploadImage(image)));

内容的提问来源于stack exchange，提问作者jerome