Using next() and res.send .Cannot set headers after they are sent to the client. Error [ERR_HTTP_HEADERS_SENT]:

Question

I am new to node js and express and learning the basicsss,, In other code errors i saw, i used to debug by seeing the throws part but itsnt here..

EDIT: I am new to the concept of middleware & next()and that has created the error as seen in upvoted answer.

Code:

const express = require('express')
const app = express()

app.use('/add-product',(req,res,next)=>{
    console.log("This is add-product page")
    res.send("<form action='/product' method ='POST'><input type='text' name ='title'><button type ='submit'>Submit</button></form> ")
    next()
})
app.use('/product',(req,res,next)=>{
    console.log('this is product-page')
    res.redirect('/')
})
app.use('/', (req,res,next)=>{
    res.send('Welcome to NodeJS')
})
app.listen(3000)

Error:

[nodemon] starting `node app.js`
This is add-product page
Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client
    at new NodeError (node:internal/errors:387:5)
    at ServerResponse.setHeader (node:_http_outgoing:603:11)
    at ServerResponse.header (C:\Users\A\Desktop\vs code\the complete tutorial\node_modules\express\lib\response.js:794:10)
    at ServerResponse.contentType (C:\Users\A\Desktop\vs code\the complete tutorial\node_modules\express\lib\response.js:624:15)
    at ServerResponse.send (C:\Users\A\Desktop\vs code\the complete tutorial\node_modules\express\lib\response.js:149:14)
    at C:\Users\A\Desktop\vs code\the complete tutorial\app.js:14:9
    at Layer.handle [as handle_request] (C:\Users\A\Desktop\vs code\the complete tutorial\node_modules\express\lib\router\layer.js:95:5)
    at trim_prefix (C:\Users\A\Desktop\vs code\the complete tutorial\node_modules\express\lib\router\index.js:328:13)
    at C:\Users\A\Desktop\vs code\the complete tutorial\node_modules\express\lib\router\index.js:286:9
    at Function.process_params (C:\Users\A\Desktop\vs code\the complete tutorial\node_modules\express\lib\router\index.js:346:12)
    

Answer 1

app.use('/add-product',(req,res,next)=>{
    console.log("This is add-product page")
    res.send("<form action='/product' method ='POST'><input type='text' name ='title'><button type ='submit'>Submit</button></form> ")
    next()
})

After you res.send(...) you can't next here. Use next() func when you want to create a middleware with condition.

Answer 2

When you are finished with processing your request and fetching the data for it and what to send the final response, use return before the res.send

The above error you are facing is because of the next() function you are calling in the '/add-product' . It will check for the next function to be called.

next() function is used when after calling a function you want another function to run for the same route.

Try this:

    app.use('/add-product',(req,res,next)=>{
    console.log("This is add-product page")
    return res.send("<form action='/product' method ='POST'><input type='text' name ='title'><button type ='submit'>Submit</button></form> ")

    });

Answer 3

You should always use return while sending response to client.

const express = require('express')
const app = express()

app.use('/add-product',(req,res,next)=>{
    console.log("This is add-product page")
    return res.send("<form action='/product' method ='POST'><input type='text' name ='title'><button type ='submit'>Submit</button></form> ")
    
})
app.use('/product',(req,res,next)=>{
    console.log('this is product-page')
    return res.redirect('/')
})
app.use('/', (req,res,next)=>{
    return res.send('Welcome to NodeJS')
})
app.listen(3000)