When it comes to running a website, every day, we get stuck with some bugs, which we find hard to fix. One of them is the error “Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client”. This error not only affects you but also all your visitors. This blog will help you fix the issue.

What is “Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client” error?

You may get the following error when attempting to utilize Express to create some NodeJS APIs.

Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client
    at new NodeError (node:internal/errors:371:5)
    at ServerResponse.setHeader (node:_http_outgoing:576:11)

And here the code that you are using

app.post("/login", (req, res) => { 
if (!req.body.username) { 
res.status(400).json({ 
status_code: 0, 
error_msg: "Require Params Missing", 
}); 
} 
res.status(200).json({ 
status_code: 1, 
data: req.body, 
}); 
});

There are may cases that it return the warning message, the cause can be calling res.redirect without a return statement; or It happened with React and postal.js when you didn’t unsubscribe from a channel in the componentWillUnmount callback of my React component.

In a different scenario, when utilizing sendStatus() in the code. So rather than sendStatus(), just utilize status(). Exactly like this: return res.status(200).json. Continue to read the below part to find the best solution for your trouble.

How To Fix The Error “Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client”?

Option 1: Utilize return statement

To fix this error, you must utilize the return statement. The error occurs as a result of your res.status(400).json. Your function will not terminate while this is being executed. As a result, you are experiencing this issue.

If a return statement appears in the body of a function, the function’s execution is halted. The function caller receives a given value if it is defined.

So, in the request handler function, add a return statement like this:

app.post("/login", (req, res) => { 
if (!req.body.username) { 
return res.status(400).json({ 
status_code: 0, 
error_msg: "Require Params Missing", 
}); 
} 
res.status(200).json({ 
status_code: 1, 
data: req.body, 
}); 
});

Your problem must now be resolved.

Option 2: Instead of status(), utilize sendStatus() 

In a different scenario, when utilizing sendStatus() in your code, you can get an error. 

if (!req.body.username) { 
return res.sendStatus(200).json({ // Error ERR_HTTP_HEADERS_SENT 
status_code: 0, 
error_msg: "Require Params Missing", 
}); 
}

So rather than sendStatus(), just utilize status(). Exactly like this: return res.status(200).json.

if (!req.body.username) { 
return res.status(200).json({ // Worked 
status_code: 0, 
error_msg: "Require Params Missing", 
}); 
}

Option 3: Callling res.redirect with a return statement

auth.annonymousOnly = function(req, res, next) {
if (req.user) return res.redirect('/');
next();
};

Option 4: Need to ‘return’ the callback

You must’return’ the callback to ensure that the method ceases when an error is discovered and you can you must set the response object at the time of error.

 var error = validateRequestDetails("create",queryReq);
if (error)
callback(error, null);
return;
else
some code 
callback(null, success);

Conclusion

We hope you enjoyed our blog post on how to solve the bug “Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client”. Please leave a comment if you have any further questions or concerns regarding this topic. Thank you for taking the time to read; we are always delighted anytime one of our pieces can give important information on this topic!