Skip to main content

How to Resolve "Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client" in JavaScript

The Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client is a classic runtime error in Node.js applications, especially those using the Express.js framework. This error means exactly what it says: your code tried to send a response to the client more than once for the same request.

This guide will explain the fundamental rule of the HTTP request/response cycle that causes this error. You will learn to identify the common coding patterns that lead to sending multiple responses and how to fix them by ensuring your code paths have a single, clear exit point for each request.

Understanding the Core Problem: One Request, One Response​

Think of an HTTP interaction as a simple conversation.

  1. The client (a browser) makes a request to your server ("GET /users").
  2. The server does some work and then sends one response back ("Here is the list of users.").
  3. Once the server sends that response, the conversation is over.

The Cannot set headers after they are sent to the client error occurs when your server tries to speak again after the conversation is already finished. The "headers" are the first part of any HTTP response. The moment you call a method like res.send(), res.json(), or res.redirect(), the headers are sent, and the response is considered "on its way." Any attempt to send another response, or even to set new headers, will trigger this error.

Cause 1: Calling Two Response Methods in a Row​

This is the most direct cause of the error. Your code explicitly calls two methods that send a response.

Example with error:

app.get('/user', (req, res) => {
  res.json({ id: 1, name: 'John Doe' });
  
  // ⛔️ This line will throw the error. The response has already been sent.
  res.send('Request was successful.'); 
});

Similarly, you cannot set headers after a response has been sent.

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

  // ⛔️ Error: Cannot set headers after they are sent.
  res.setHeader('Content-Type', 'text/plain'); 
});

Solution: Ensure that only one of the response-sending methods (.send(), .json(), .render(), .redirect()) is called for any given request.

Cause 2: Code Continues to Run After a Response is Sent in a Conditional Block​

This is a more subtle but extremely common version of the problem. You send a response inside an if block, but you don't stop the function from executing. The code continues and tries to send a second response later on.

Example with error:

app.get('/user/:id', (req, res) => {
  const { id } = req.params;

  if (id < 0) {
    // We send a 400 error response here...
    res.status(400).json({ error: 'Invalid user ID.' });
  }

  // ...but the function keeps running!
  console.log('Fetching user data...');
  
  // ⛔️ This line also runs, attempting to send a second response.
  res.json({ id, name: 'User Data' }); 
});

Solution: return from Your Response​

The definitive way to fix the conditional block problem is to use the return keyword when you send a response. This does two things: it sends the response, and it immediately stops the function from executing any further.

An example of correct code:

app.get('/user/:id', (req, res) => {
  const { id } = req.params;

  if (id < 0) {
    // ✅ GOOD: We send the response AND exit the function.
    return res.status(400).json({ error: 'Invalid user ID.' });
  }

  // This code will now only run if the `if` block was false.
  console.log('Fetching user data...');
  return res.json({ id, name: 'User Data' });
});
note

By adding return to every response, you guarantee that only one response is ever sent. This is a critical best practice in Express development.

Cause 3: Sending a Response Inside an Asynchronous Callback​

This error is also common with asynchronous code, like database queries or file operations. You might send an error response inside a callback, but the main function continues and sends a success response.

Example with error:

app.get('/data', (req, res) => {
  db.query('SELECT * FROM users', (err, results) => {
    if (err) {
      // We send an error response here...
      res.status(500).send('Database error');
    }
    
    // ...but we forgot to stop the function. The code below might still run.
  });

  // ⛔️ This line might run before the callback, causing a race condition or a double response.
  res.send('Query initiated...');
});

Solution: Use return and Structure Your Code​

Again, return is the key. You should also structure your asynchronous code to avoid this pattern.

app.get('/data', async (req, res) => {
  try {
    const results = await db.query('SELECT * FROM users');
    return res.json(results); // Send success response and exit.
  } catch (err) {
    // If the `await` fails, we jump to the `catch` block.
    return res.status(500).send('Database error'); // Send error response and exit.
  }
});
note

Using modern async/await with try...catch blocks makes this kind of error much less likely.

Conclusion​

The Cannot set headers after they are sent to the client error is always caused by attempting to send more than one response to a single HTTP request.

To fix it, you must ensure that your code has only one logical path that sends a response for any given request:

  1. Check your code for places where you call .send(), .json(), or .redirect() multiple times in a row.
  2. Use the return keyword whenever you send a response from within a conditional block or a callback. This is the most important best practice.
  3. Use async/await with try...catch to manage asynchronous operations and prevent race conditions where multiple responses can be sent.

Table of Contents