CODEWITHSUNDEEP
javascriptnode.jsexpresscorsmean-stack
rabdill
rabdill

Reputation: 467

Setting default response headers in Express

I'm working on a small app running on the MEAN stack, and have hit an annoying snag: My backend app (Node with Express) is running at http://localhost:3000 and working just fine, but my frontend client app (Javascript with AngularJS) is running at http://localhost:8000, which means requests sent from Angular are received and responded to, but are rejected once they arrive because they're interpreted as coming from a different origin.

I was able to fix this with relatively little drama, by making my 'show me all the stuff' method look something like this:

exports.index = function(req, res) {
  Region.find({}, function(err, docs) {
    if(!err) {
      res.setHeader('Access-Control-Allow-Origin', 'http://localhost:8000');
      res.json(200, { regions: docs });
    } else {
      res.setHeader('Access-Control-Allow-Origin', 'http://localhost:8000');
      res.json(500, { message: err });
    }
  });
}

The res.setHeader('Access-Control-Allow-Origin', 'http://localhost:8000'); line is the one that I added to tell the browser it was fine to accept the response and stop bothering me about it; the problem now is that I have to add this stupid line to every single response that's sent from anywhere, and I'm convinced I must be missing some way to just change the default headers to include the Access-Control-Allow-Origin entry forever.

In a perfect world, I'd be able to flip this on and off based on what environment the code was being executed in, but I'd totally settle for a code block in app.js that I could at least remove one time instead of trying to track down 75 instances of res.setHeader. I figure there must be a way to change the .json method hiding behind res at its base, but the docs don't offer any insight into how I might do that, not to mention whether it's a terrible idea. Any thoughts?

edit

I thought (as was suggested) that configuring application-level middleware was the key. Here's the code that I added to my app.js file:

// allow CORS:
app.use(function (req, res, next) {
  res.setHeader('Access-Control-Allow-Origin', 'http://localhost:8000');
  next();
});

This, however, yielded the same error ("No 'Access-Control-Allow-Origin' header is present on the requested resource.") as before.

Upvotes: 7

Views: 11473

Answers (3)

Mig82
Mig82

Reputation: 5478

I just ran into the same issue and tried the same snippet above. It did the trick.

// allow CORS:
app.use(function (req, res, next) {
  res.setHeader('Access-Control-Allow-Origin', 'http://localhost:8000')
  next()
})

IMPORTANT: I had to place it above all other app.use(xyz) entries, just like @rev_bird mentioned he did with the CORS module. Try it.

Upvotes: 2

Subham
Subham

Reputation: 1465

Try this one as a middleware:

app.use(function(req, res, next) {
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST');
  res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type, Authorization');
  next();
});

Upvotes: 9

A.B
A.B

Reputation: 20445

you can make a common middleware using .use() or can use npm packages like express-interceptor also to intercept the response

Upvotes: 1

Related Questions