6

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.

5
  • 1
    This is what app.use() is for to install a middleware handler that gets to see/modify all requests.
    – jfriend00
    Sep 3, 2015 at 2:37
  • I have a feeling that I'm close, but the middleware I'm registering doesn't seem to be doing anything (see the edit to my question); I added some debugging output to see when it was being executed, but it never popped up in the console. I was optimistic about the "setHeaders" option in the built-in middleware, but it's only for the static resources and I can't find a corresponding third-party one that handles... everything else.
    – rabdill
    Sep 3, 2015 at 3:11
  • 1
    It looks like you might also have to set Access-Control-Allow-Headers. See jonathanmh.com/how-to-enable-cors-in-express-js-node-js
    – jfriend00
    Sep 3, 2015 at 3:40
  • 1
    Try the npm module npmjs.com/package/cors it's pretty solid
    – jusynth
    Sep 3, 2015 at 3:46
  • @jfriend00: If I use the original, repetitive way of setting the headers, it works with or without Access-Control-Allow-Headers. @jusynth: The "cors" packaged WORKED! At first, it failed like the other half-dozen packages I've tried, but moving app.use(cors()); from the bottom of the list of app.use(foo) entries to the top of the list fixed it all. No idea why. Thanks so much.
    – rabdill
    Sep 3, 2015 at 3:53

3 Answers 3

7

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();
});
3
  • is this safe for production use-cases?
    – Kubie
    Jul 2, 2019 at 15:00
  • you can use exact IP for Access-Control-Allow-Origin header more security and can delete X-Requested-With in Access-Control-Allow-Headers.Otherwise, it's oK
    – Subham
    Jul 9, 2019 at 10:38
  • Just a heads up for anyone seeing this, using * for Access-Control-Allow-Origin will result in an error for requests that use credentials. Mar 7 at 14:28
2

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.

1

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

1
  • Gah, I hate to un-mark this as the answer, but I realized once I approved this one that I'd forgotten to restart the server. I added my snippet above so you can see what got added, but it didn't actually work.
    – rabdill
    Sep 3, 2015 at 2:58

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.