Category: Express

Sometimes, we may run into the “Can’t set headers after they are sent to the client” when we run our Express app.

In this article, we’ll look at how to fix the “Can’t set headers after they are sent to the client” in our Express app.

Fix the “Can’t set headers after they are sent to the client” Error in an Express App

To fix the “Can’t set headers after they are sent to the client” in our Express app, we should make sure that we only send a response once in our Express middleware chain.

For instance, we shouldn’t have code like:

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

app.get('/', (req, res) => {
  res.send('hello world')
  res.send('hello world')
});

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`)
})

which calls res.send twice.

We should make sure that we only send a response once in our middleware chain.

This also means we shouldn’t have code like:

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

app.use((req, res, next) => {
  res.send('hello world')
  next()
})

app.get('/', (req, res) => {
  res.send('hello world')
});

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`)
})

where we call res.send in our middleware that’s run before the / route handler.

And res.send is also called in the / route handler itself.

This will also cause the error.

Instead, we should write:

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

app.get('/', (req, res) => {
  res.send('hello world')
});

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`)
})

or:

const express = require('express')
const app = express()
const port = 3000
app.use((req, res, next) => {
  console.log('hello world')
  next()
})

app.get('/', (req, res) => {
  res.send('hello world')
});

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`)
})

where we only return a response once in the whole middleware chain.

Conclusion

To fix the “Can’t set headers after they are sent to the client” in our Express app, we should make sure that we only send a response once in our Express middleware chain.

Sometimes, we may run into the “No ‘Access-Control-Allow-Origin’ header is present on the requested resource” error in our JavaScript app.

In this article, we’ll look at how to fix the “No ‘Access-Control-Allow-Origin’ header is present on the requested resource” error in our JavaScript app.

Fix the “No ‘Access-Control-Allow-Origin’ header is present on the requested resource” Error in a JavaScript App

To fix the “No ‘Access-Control-Allow-Origin’ header is present on the requested resource” error in our JavaScript app, we should enable cross-origin resource sharing (CORS) on the server app.

For instance, if we’re using Express to build our server-side web app, we can use the cors middleware.

To use it, we write:

const express = require('express')
const cors = require('cors')
const app = express()
const port = 3000

app.use(cors())

app.get('/', (req, res) => {
  res.send('hello world')
});

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`)
})

to add the cors middleware into our Express app with:

app.use(cors())

We installed the cors package to make it available.

To install it, we run:

npm i cors

Now we should be able to make requests from our JavaScript app to our server-side web app without the No ‘Access-Control-Allow-Origin’ header is present on the requested resource thrown in our JavaScript browser app.

Conclusion

To fix the “No ‘Access-Control-Allow-Origin’ header is present on the requested resource” error in our JavaScript app, we should enable cross-origin resource sharing (CORS) on the server app.

For instance, if we’re using Express to build our server-side web app, we can use the cors middleware.

To serve a single static file with Express.js, we can use the express.static middleware.

For instance, we can write:

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

app.use("/foo.txt", express.static(__dirname + '/foo.txt'));

app.get('/', (req, res) => {
  res.send('hello world')
});

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`)
})

to add:

app.use("/foo.txt", express.static(__dirname + '/foo.txt'));

to use the express.static middleware to expose the foo.txt file to the public.

We make it accessible by making a request to “/foo.txt” since that’s the first argument we passed into app.use .

And we make it serve the foo.txt file from the current working directory with:

express.static(__dirname + '/foo.txt')

So when we make a request to /foo.txt , we would see its contents in the response.

To generate a robots.txt file from our Express app, we can create a robots.txt file that returns the text content of the robots.txt file.

For instance, we can write:

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

app.get('/', (req, res) => {
  res.send('hello world')
});

app.use('/robots.txt', function(req, res, next) {
  res.type('text/plain')
  res.send("User-agent: *\nDisallow: /");
});

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`)
})

to create the /robots.txt route by writing:

app.use('/robots.txt', function(req, res, next) {
  res.type('text/plain')
  res.send("User-agent: *\nDisallow: /");
});

We call res.type to set the MIME type of the response to text/plain .

And we call res.send with the robots.txt content we want to return.

So when we make a GET request to the /robots.txt route, we get:

User-agent: *
Disallow: /

To add a response timeout feature to an Express.js app to end requests that take too long to process, we can use the connect-timeout package.

To install it, we run:

npm i `connect-timeout`

Then we can use it by writing:

const express = require('express')
const timeout = require('connect-timeout');
const app = express()
const port = 3000
const haltOnTimedout = (req, res, next) => {
  if (!req.timedout) {
    next();
  }
}

app.use(timeout(120000));
app.use(haltOnTimedout);

app.get('/', (req, res) => {
  res.send('hello world')
});

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`)
})

We include the module with require .

Then we create the haltOnTimeout function that checks the req.timedout property to see if the request has timed out.

If it hasn’t timed out, then req.timedout is false and we call next to move forward with the request.

This property is available which we added:

app.use(timeout(120000));

to add the connect-timeout middleware to detect the timeout.

120000 is in milliseconds and it’s the number of milliseconds before the request times out.