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.
app.use()
is for to install a middleware handler that gets to see/modify all requests.Access-Control-Allow-Headers
. See jonathanmh.com/how-to-enable-cors-in-express-js-node-jsAccess-Control-Allow-Headers
. @jusynth: The "cors" packaged WORKED! At first, it failed like the other half-dozen packages I've tried, but movingapp.use(cors());
from the bottom of the list ofapp.use(foo)
entries to the top of the list fixed it all. No idea why. Thanks so much.