解决 Express.js 中的 “ERR_HTTP_HEADERS_SENT” 错误-JavaScript中文网-JavaScript教程资源分享门户

问题描述

在使用 Express.js 开发 Web 应用时，有时会遇到 “ERR_HTTP_HEADERS_SENT” 错误。这个错误通常会导致部分请求无法响应，浏览器会显示 blank page 或者无响应。

具体错误信息如下：

Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client

产生原因

这个错误通常是由于在一个请求周期内多次发送 HTTP 响应头造成的。在 Express.js 中，响应头只能被设置一次，如果尝试设置多次，就会产生上面的错误。

通常情况下，这个错误会被 Express.js 自动捕捉并输出错误信息，但是有时候会出现无响应的情况。

解决办法

避免在一个请求周期内多次发送 HTTP 响应头。

这个是最根本的解决办法，需要仔细检查代码中是否有重复发送响应头的地方。可以使用调试工具逐行检查，或者使用 console.log 输出日志，定位出问题所在。
确认代码使用了正确的 Next 函数。

在 Express.js 中，每个中间件都需要调用 Next 函数将控制权交给下一个中间件或路由器处理。如果没有调用 Next 函数，就会出现这个错误。
```
app.use((req, res, next) => {
  // TODO: 相应处理逻辑
  next(); // important!
});
```
或者，在某些情况下，需要使用 return 即可避免这个错误。
```
app.use((req, res, next) => {
  if (condition) {
    return res.status(200).json({ message: "OK" });
  }
  next();
});
```

重新构造代码逻辑。

如果以上两种方法未能解决问题，则需要重新考虑代码逻辑，重构代码。

// javascriptcn.com 代码示例
app.use((req, res, next) => {
  // 如果条件成立，则发送 HTTP 响应头
  if (condition) {
    res.status(200).json({ message: "OK" });
  } else {
    // 否则将控制权交给下一个中间件或路由器处理
    next();
  }
});

总结

“ERR_HTTP_HEADERS_SENT” 错误在 Express.js 中比较常见，通常是由于多次发送 HTTP 响应头造成的。解决这个问题需要检查代码中是否有重复发送响应头的地方，并严格按照代码逻辑设置 Next 函数。如果以上方式均无法解决问题，则需要从代码结构和逻辑出发，重构代码。

在实际开发过程中，建议使用调试工具和日志系统快速定位问题所在，提高效率。以下是一些示例代码供参考：

// javascriptcn.com 代码示例
const express = require("express");
const app = express();

// example: 多次发送响应头
app.get("/", (req, res) => {
  res.writeHead(200, { "Content-Type": "text/plain" });
  res.end("Hello World!");

  setTimeout(() => {
    res.writeHead(200, { "Content-Type": "text/plain" });
    res.end("Hello World!");
  }, 500);
});

// example: 可能导致错误的 Next 函数
app.use((req, res, next) => {
  if (condition) {
    res.status(200).json({ message: "OK" });
  }
  // 不管条件是否成立，都会执行 Next 函数
  next();
});

// example: 修正 Next 函数
app.use((req, res, next) => {
  if (condition) {
    return res.status(200).json({ message: "OK" });
  }
  next();
});

// example: 重构代码逻辑
app.use((req, res, next) => {
  if (condition) {
    res.status(200).json({ message: "OK" });
  } else {
    next();
  }
});

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/654aebf17d4982a6eb4e363d