Express中设置非200状态码后响应丢失及重复发送响应问题排查

嘿，我来帮你搞定这两个头疼的问题！咱们一步步来：

问题1：错误处理后代码仍继续执行，触发重复响应错误 #

这个问题的核心是错误处理后没有终止后续代码的执行，导致后面的res.status(200).send()会重复发送响应，触发"Can't set headers when they are sent to the client"错误。

修复方案： #

1. 用一个变量标记是否已经处理过错误，避免重复响应
2. 错误处理完成后用return终止当前回调的后续代码
3. 不需要手动调用.end()，res.send()已经自动完成了响应结束的操作

修改后的后端代码：

app.post("/upload", (req, res) => {
  let hasError = false; // 标记是否已处理错误
  var form = new formidable.IncomingForm();

  form.on("error", err => {
    if (err && !hasError) {
      hasError = true;
      res.status(500).send(`Error on formidable : ${err}`);
      console.log('错误已处理');
      return; // 终止当前回调后续代码
    }
  });

  form.encoding = "utf8";
  form.uploadDir = "./uploadedFiles/";
  form.maxFileSize = 2000 * 1024 * 1024;

  form.parse(req, (err, fields, files) => {
    if (hasError) return; // 如果已经处理过错误，直接返回

    if (err) {
      res.status(500).send(`error on parsing : ${err}`);
      return; // 终止后续代码，避免执行到成功响应
    }

    // 你的业务逻辑代码...

    // 只有无错误时才发送成功响应
    res.status(200).send("form successfully Submitted !");
  });
});

问题2：客户端无法接收非200状态码的响应数据 #

这是因为Axios在捕获非200状态码的错误时，后端返回的数据并不在error本身，而是在error.response.data里。你之前直接把error对象显示出来，自然看不到后端发送的错误信息。

修复方案： #

修改客户端的catch逻辑，正确提取后端返回的错误内容：

try {
  let response = await axios.post("/upload", FD, { 
    "Content-Type": "multipart/form-data" 
  });
  console.log(response);
  $("#res")
    .css("display", "block")
    .text(response.data);
  $("#spinnerbox").css("display", "none");
} catch (error) {
  // 区分网络错误和后端返回的错误
  const errorMsg = error.response ? error.response.data : '网络连接出错';
  $("#res")
    .css("display", "block")
    .text(errorMsg);
  console.log("捕获到错误:", errorMsg);
}

关键要点总结 #

• 终止后续代码：错误处理后一定要加return，避免后续的响应代码执行
• 不要手动调用.end()：res.send()、res.json()等方法已经自动完成了响应结束的操作
• Axios错误处理：非200状态码的响应数据在error.response.data中，需要正确提取
• 错误状态标记：用hasError变量处理Formidable的error事件和parse回调之间的冲突，防止重复响应

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