React+Node.js项目修改密码触发ERR_HTTP_HEADERS_SENT报错如何解决

Error [ERR_HTTP_HEADERS_SENT] 错误触发的核心原因是同一个HTTP请求内，服务端向客户端发送了两次及以上的响应，你的服务端代码存在逻辑疏漏：
当旧密码校验不匹配时，你执行了res.json({ error: "Wrong Password Entered!" })返回错误提示，但未在此处添加return终止后续代码执行。程序会继续向下执行，调用bcrypt.hash后又执行了一次res.json({ message: "SUCCESS" })，导致同一个请求返回两次响应，触发报错。

方案1：最小改动，在错误返回后添加return终止逻辑 #

仅需要修改旧密码校验不通过的分支，添加return即可避免后续代码执行：

router.put("/changepassword", validateToken, async (req, res) => {
  const { oldPassword, newPassword } = req.body;
  const user = await Users.findOne({ where: { fullName: req.user.fullName } });

  bcrypt.compare(oldPassword, user.password).then(async (match) => {
    // 此处添加return，返回错误后终止后续逻辑执行
    if (!match) return res.json({ error: "Wrong Password Entered!" });

    bcrypt.hash(newPassword, 10).then((hash) => {
      // 建议补充await/错误捕获，避免update操作异常时无反馈
      Users.update(
        { password: hash },
        { where: { fullName: req.user.fullName } }
      );
      res.json({ message: "SUCCESS" });
    });
    return;
  });
});

方案2：改用async/await语法优化异步逻辑，避免回调嵌套导致的疏漏 #

原来的回调嵌套写法很容易漏写return，换成async/await语法可读性更强，也更容易规避这类问题：

router.put("/changepassword", validateToken, async (req, res) => {
  try {
    const { oldPassword, newPassword } = req.body;
    const user = await Users.findOne({ where: { fullName: req.user.fullName } });
    // 校验旧密码
    const match = await bcrypt.compare(oldPassword, user.password);
    if (!match) {
      return res.json({ error: "Wrong Password Entered!" });
    }
    // 加密新密码
    const hash = await bcrypt.hash(newPassword, 10);
    // 更新数据库
    await Users.update(
      { password: hash },
      { where: { fullName: req.user.fullName } }
    );
    return res.json({ message: "SUCCESS" });
  } catch (err) {
    // 捕获所有异常，返回通用错误，避免服务端崩溃
    return res.status(500).json({ error: "Server internal error" });
  }
});

• 建议在客户端axios请求中补充catch分支，捕获网络异常、服务端报错等场景，避免前端无反馈。
• 所有数据库操作、加密操作都建议补充错误捕获逻辑，避免异常直接抛出导致服务端崩溃。

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