How to enable shredding resource sharing (CORS) in express.js framework on node.js

Question

I am trying to create a web server in node.js that will support cross-domain scripts while maintaining static files from a shared directory. I use express.js and am not quite sure how to resolve cross-domain scripts ( Access-Control-Allow-Origin: * ).

I saw this post which I did not find useful.

 var express = require('express') , app = express.createServer(); app.get('/', function (req, res, next) { res.header("Access-Control-Allow-Origin", "*"); res.header("Access-Control-Allow-Headers", "X-Requested-With"); next(); }); app.configure(function () { app.use(express.methodOverride()); app.use(express.bodyParser()); app.use(app.router); }); app.configure('development', function () { app.use(express.static(__dirname + '/public')); app.use(express.errorHandler({ dumpExceptions: true, showStack: true })); }); app.configure('production', function () { var oneYear = 31557600000; // app.use(express.static(__dirname + '/public', { maxAge: oneYear })); app.use(express.static(__dirname + '/public')); app.use(express.errorHandler()); }); app.listen(8888); console.log('express running at http://localhost:%d', 8888); 

Answer 1

Check out an example from enable-cors.org :

In an ExpressJS application on node.js, follow these routes:

 app.all('/', function(req, res, next) { res.header("Access-Control-Allow-Origin", "*"); res.header("Access-Control-Allow-Headers", "X-Requested-With"); next(); }); app.get('/', function(req, res, next) { // Handle the get for this route }); app.post('/', function(req, res, next) { // Handle the post for this route }); 

The first call ( app.all ) must be made before all other routes in your application (or at least the ones you want to enable CORS).

[change]

If you want the headers to appear for static files as well, try this (make sure before calling use(express.static()) :

 app.use(function(req, res, next) { res.header("Access-Control-Allow-Origin", "*"); res.header("Access-Control-Allow-Headers", "X-Requested-With"); next(); }); 

I checked this with your code and got the asset headers from the public directory:

 var express = require('express') , app = express.createServer(); app.configure(function () { app.use(express.methodOverride()); app.use(express.bodyParser()); app.use(function(req, res, next) { res.header("Access-Control-Allow-Origin", "*"); res.header("Access-Control-Allow-Headers", "X-Requested-With"); next(); }); app.use(app.router); }); app.configure('development', function () { app.use(express.static(__dirname + '/public')); app.use(express.errorHandler({ dumpExceptions: true, showStack: true })); }); app.configure('production', function () { app.use(express.static(__dirname + '/public')); app.use(express.errorHandler()); }); app.listen(8888); console.log('express running at http://localhost:%d', 8888); 

You could, of course, package the function in a module so that you could do something like

 // cors.js module.exports = function() { return function(req, res, next) { res.header("Access-Control-Allow-Origin", "*"); res.header("Access-Control-Allow-Headers", "X-Requested-With"); next(); }; } // server.js cors = require('./cors'); app.use(cors()); 

Answer 2

After @Michelle Tilley's solution, apparently it didn't help me at first. Not sure why, maybe I'm using Chrome and a different version of the site. After making some small changes, it works for me now.

 app.all('*', function(req, res, next) { res.header('Access-Control-Allow-Origin', '*'); res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS'); res.header('Access-Control-Allow-Headers', 'Content-Type'); next(); }); 

In case someone is faced with a problem similar to mine, this can be useful.

Answer 3

Try cors npm modules.

 var cors = require('cors') var app = express() app.use(cors()) 

This module provides many functions for fine-tuning cors settings, such as whitelisting a domain, enabling cors for a specific apis, etc.

Answer 4

I use this:

 var app = express(); app .use(function(req, res, next){ res.header('Access-Control-Allow-Origin', '*'); res.header('Access-Control-Allow-Headers', 'X-Requested-With'); next(); }) .options('*', function(req, res, next){ res.end(); }) ; h.readFiles('controllers').forEach(function(file){ require('./controllers/' + file)(app); }) ; app.listen(port); console.log('server listening on port ' + port); 

this code assumes your controllers are located in the controllers directory. each file in this directory should look something like this:

 module.exports = function(app){ app.get('/', function(req, res, next){ res.end('hi'); }); } 

Answer 5

Recommend using cors express module. This allows you to rename domains, allow / restrict domains specifically for routes, etc.,

Answer 6

You must set Access-Control-Allow-Credentials: true if you want to use cookies through "Credentials"

 app.all('*', function(req, res, next) { res.header('Access-Control-Allow-Origin', '*'); res.header('Access-Control-Allow-Credentials', true); res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS'); res.header('Access-Control-Allow-Headers', 'Content-Type'); next(); }); 

Answer 7

Another step I needed to take was to switch my URL from http://localhost to http://127.0.0.0