React fetch上传文件至ExpressJS服务器成功却触发错误

针对你遇到的「文件上传成功但前端fetch报错TypeError: Failed to fetch」的问题，核心原因大概率是浏览器端的响应拦截或解析失败，以下是具体排查方向和解决办法：

1. 优先检查CORS跨域配置 #

即使服务器成功处理了请求，若未正确配置CORS响应头，浏览器会出于安全策略拦截响应，导致fetch触发错误。

• 确保服务器返回以下关键响应头：
  • Access-Control-Allow-Origin: 设置为前端域名（或*用于测试，生产环境建议指定具体域名）
  • Access-Control-Allow-Methods: 包含POST方法
  • Access-Control-Allow-Headers: 包含Content-Type等必要头
• 若使用Express框架，可直接用cors中间件简化配置：

  const cors = require('cors');
  app.use(cors({
    origin: "你的前端域名", // 例如"https://your-frontend.com"
    methods: ["POST", "OPTIONS"],
    allowedHeaders: ["Content-Type"]
  }));
  

2. 验证响应是否为有效JSON #

fetch的response.json()会在响应内容不是有效JSON时抛出错误，即使服务器返回了200状态码。

• 临时修改前端代码，先打印响应文本排查：

  await fetch("https://blah.herokuapp.com/upload-files", requestOptions2)
    .then((response) => {
      console.log("Response status:", response.status);
      return response.text(); // 先转文本而非JSON
    })
    .then((responseText) => {
      console.log("Raw response:", responseText);
      try {
        const responseJson = JSON.parse(responseText);
        console.log("Parsed JSON:", responseJson);
      } catch (e) {
        console.error("JSON parse error:", e);
      }
    })
    .catch((error) => {
      console.log("Upload error?")
      console.error(error)
    });
  

• 同时检查服务器端：确保res.send的内容是可正常序列化的JSON对象，避免循环引用或非法格式。

3. 完善fetch的错误处理逻辑 #

fetch仅在网络层面出错时才会进入catch，HTTP状态码错误（如400、500）不会触发catch，需手动判断响应状态：

await fetch("https://blah.herokuapp.com/upload-files", requestOptions2)
  .then((response) => {
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
    return response.json();
  })
  .then((response) => {
    console.log("UPLOAD RESULT: ")
    console.log(response)
  })
  .catch((error) => {
    console.log("Upload error?")
    console.error(error)
  });

4. 统一异步代码风格 #

避免混合使用async/await和then/catch，建议改用纯async/await写法，更易排查错误：

async function uploadFile(file, typeSent) {
  console.log("SENT FILE:", file);
  let formInfo = new FormData();
  formInfo.append("file", file);
  formInfo.append("name", file.name);

  const requestOptions2 = {
    method: "POST",
    body: formInfo,
    redirect: "follow"
  };

  try {
    console.log("ATTEMPTING UPLOAD:");
    const response = await fetch("https://blah.herokuapp.com/upload-files", requestOptions2);
    if (!response.ok) {
      throw new Error(`Server responded with ${response.status}`);
    }
    const result = await response.json();
    console.log("UPLOAD RESULT: ", result);
  } catch (error) {
    console.log("Upload error?");
    console.error(error);
  }
}

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