Solutions For Error “Cannot Set Headers After They Are Sent To The Client” In Javascript

Before fixing the “Cannot set headers after they are sent to the client” error in Javascript, we need to find out its root cause first. Then read our error resolution to understand how we deal with it.

Cause of error “Cannot Set Headers After They Are Sent To The Client” in Javascript

To understand how the error appears, follow the example below.

Example

const express = require("express");
const app = express();
const port = 3000;

app.get("/", (res) => {
    if (true) {
        // Send data to the client
        res.send("LearnShareIT");
    }
    // Send data to the client
    res.send("Data");
});

app.listen(port, () => console.log(`Example app listening on port ${port}`));

Output

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

We see this two send () methods being executed, and each method will do the following things:

• Set header
• Send feedback
• End of feedback

After finishing the response, we intentionally used the send() method to reset the header again, causing an error.

Simply put, this error appears when we send multiple responses to a request.

How to fix this error?

Use return statement

This statement will terminate the execution of a function and return a value.

Syntax

return expression

Parameter

expression: Is the value you want to return.

Example

const express = require("express");
const app = express();
const port = 3000;

app.get("/", (res) => {
    if (true) {
        // Return and send data to the client
        return res.send("LearnShareIT");
    }

    // Return and send data to the client
    return res.send("Data");
});

app.listen(port, () => console.log(`Example app listening on port ${port}`));

Output

LearnShareIT

We use the return statement every time we use the send() method to send data to the client.

This is to avoid resetting the header after the response has ended.

Or understand that you should only send 1 response to a request to avoid the “Cannot set headers after they are sent to the client” in JavaScript error.

The response functions such as res.json(), res.send(), res.redirect(), res.render() should use only one of these functions.

Use the headersSent property

The property checks if the response header has been set. The return data type is Boolean.

Example

const express = require("express");
const app = express();
const port = 3000;

app.get("/", (res) => {

   // Send data to the client
   res.send("LearnShareIT");
   // Check if the header is set
   if (res.headersSent !== true) {

	 // Send data to the client
      res.send("New data");
   }
});

app.listen(port, () => console.log(`Example app listening on port ${port}`));

Output

LearnShareIT

After returning the data to the client using the send() method, we use the headersSent property to check if the header has been set; If not, we will send a new response.

Summary

This article showed you how to fix the “Cannot set headers after they are sent to the client” in Javascript. On our site, there are many articles like this; please follow them to read.

Tom Joseph

My name is Tom Joseph, and I work as a software engineer. I enjoy programming and passing on my experience. C, C++, JAVA, and Python are my strong programming languages that I can share with everyone. In addition, I have also developed projects using Javascript, html, css.

Job: Developer
Name of the university: UTC
Programming Languages: C, C++, Javascript, JAVA, python, html, css