解决 Express.js 应用程序中出现的 “错误代码 ERR_HTTP_HEADERS_SENT” 的问题-JavaScript中文网-JavaScript教程资源分享门户

问题背景

在 Express.js 应用程序中使用 HTTP Response 发送数据时，可能会遇到以下错误提示：

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

该错误提示意味着在发送 HTTP Response 时，已经发送了头部，无法再次修改头部信息。

问题原因

在 Express.js 中，每次发送 HTTP Response 时，都会发送 HTTP 头部，该头部包含响应的状态码、响应的内容类型以及其他相关信息。如果在发送响应后尝试修改该头部信息，则会触发该错误提示。

造成该问题的原因通常有以下几种：

发送多次响应；
在中间件或者控制器中，多次发送响应。

解决方案

1. 仅发送一次响应

为了避免该错误提示的出现，建议在每个请求中仅发送一次响应。

app.get('/', (req, res) => {
  res.send('Hello World!');
});

如果有多个函数需要发送响应，则可以使用 return 语句将控制权传递给下一个中间件或控制器。

app.get('/', (req, res, next) => {
  // some code
  return next();
}, (req, res) => {
  res.send('Hello World!');
});

2. 使用条件语句

如果需要在中间件或控制器中进行条件判断，可以使用条件语句（例如 if、switch）向客户端发送响应。

// javascriptcn.com 代码示例
app.get('/', (req, res, next) => {
  if (req.query.name) {
    res.send(`Hello ${req.query.name}!`);
  } else {
    next();
  }
}, (req, res) => {
  res.send('Hello World!');
});

3. 使用异步函数

在使用异步函数时，需要确保在异步调用返回前不会发送 HTTP 头。可以将控制传递给下一个中间件或控制器，并在 async 函数中使用 await 关键字等待异步操作完成后再发送响应。

app.get('/', async (req, res, next) => {
  // Async call
  await someAsyncFunction();
  
  next();
}, (req, res) => {
  res.send('Hello World!');
});

4. 错误处理

在发生其他错误时，需要确保捕获错误并向客户端发送错误响应。建议在中间件或控制器的末尾添加错误处理代码，并将错误信息发送到客户端。

// javascriptcn.com 代码示例
app.get('/', (req, res, next) => {
  // some code
  if (error) {
    next(error);
  } else {
    next();
  }
}, (req, res) => {
  res.send('Hello World!');
});

app.use((err, req, res, next) => {
  console.error(err);
  res.status(500).send('Oops! Something went wrong.');
});

总结

在使用 Express.js 框架时，避免错误代码 ERR_HTTP_HEADERS_SENT 的最佳方式是在每个请求中仅发送一次响应，并在遵循其他最佳实践的情况下编写代码。

参考资料

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/64fa1a76f6b2d6eab314b68f