Resolving HTTP Cannot set headers after they are sent to the client in Node.JS
📣 Sponsor
When using express and Node.JS, we will sometimes get this error:
Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client
at new NodeError (node:internal/errors:277:15)
at ServerResponse.setHeader (node:_http_outgoing:563:11)
at ServerResponse.header (/node_modules/express/lib/response.js:771:10)
at file:///link/to/file/app.js:309:13 {
code: 'ERR_HTTP_HEADERS_SENT'
}
This is quite a confusing error if you aren't familiar with HTTP headers. This error arises when you send more than 1 responses to the user or client. That means the receiver is getting two responses, when it should only be getting one. To solve this, make sure you are only sending one response.
How to solve the ERR_HTTP_HEADERS_SENT error
This can often be caused when you send a response to the client, and an asychronous piece of code then sends a second response after the first. Look in your code, you may be accidentally using res.send
twice. For example, the below will cause the error:
app.get('/app', async function(req, res) {
/* Don't do this! Remove one of the res.send functions to remove the error */
await User.find({username: req.headers.username}, function(err, items) {
res.send('User');
})
res.send('Hello');
})
Note: other res functions, such as res.redirect
will cause the same issue, i.e. the below code is also wrong:
app.get('/app', function(req, res) {
/* Don't do this! Remove one of these functions to remove the error */
await User.find({username: req.headers.username}, function(err, items) {
res.redirect('/app/login');
})
res.send('Hello');
})
Your code should instead look like this, with only one res
function:
app.get('/app', function(req, res) {
res.redirect('/app/login');
})
Preventing multiple headers from being sent
If you want to prevent multiple headers being sent with certainty in Express and Node.JS, use res.headersSent
. If it's set to true, then the headers have already been sent.
For example, the following code will work as res.headerSent
prevents headers from being re-sent:
app.get('/app', function(req, res) {
res.send('Hello');
// Will not send, as we have already sent once.
// Prevents error.
if(res.headersSent !== true) {
res.send('Hello');
}
})
More Tips and Tricks for Javascript
- Making a Morphing 3D Sphere in Javascript with Three.js
- Art Generator with Javascript and WebGL
- How to Change CSS with Javascript
- How the Javascript History API Works
- A Look at the New Array Methods coming to Javascript
- Javascript Records and Tuples
- Javascript Arrays - How to Remove Duplicate Elements
- How to get the current URL with Javascript
- Import, Export and Require in Javascript
- Javascript Objects Cheatsheet