enable CORS on angular-fullstack generator?

Question

Ok i have a EC2 instance up and running with nodeJs and express I'm uing the vanilla install of the generator and my app.js file is as follows:

/**
 * Main application file
 */

'use strict';

// Set default node environment to development
process.env.NODE_ENV = process.env.NODE_ENV || 'development';

var express = require('express');
var mongoose = require('mongoose');
var config = require('./config/environment');


// Connect to database
mongoose.connect(config.mongo.uri, config.mongo.options);

// Populate DB with sample data
//require('./config/seed');

// Setup server
var app = express();

var server = require('http').createServer(app);


var socketio = require('socket.io')(server, {

  serveClient: (config.env === 'production') ? false : true,
  path: '/socket.io-client'

});
require('./config/socketio')(socketio);
require('./config/express')(app);
require('./routes')(app);

// Start server
server.listen(config.port, config.ip, function () {
  console.log('Express server listening on %d, in %s mode', config.port, app.get('env'));
});

// Expose app
exports = module.exports = app;

route.js as declared in require('./routes')(app); is as follows:

/**
 * Main application routes
 */

'use strict';

var errors = require('./components/errors');
var cors = require('./config/cors');
module.exports = function(app) {
  /*
  app.all('*', function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "X-Requested-With");
    next();
   });
  app.all('/', function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "X-Requested-With");
    next();
   });  
  app.use(function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "X-Requested-With");
    next();
  });
*/
// Insert routes below
  app.use('/api/things', require('./api/thing'));
  app.use('/api/users', require('./api/user'));

  app.use('/auth', require('./auth'));

  // All undefined asset or api routes should return a 404
  app.route('/:url(api|auth|components|app|bower_components|assets)/*')
   .get(errors[404]);


  // All other routes should redirect to the index.html
  app.route('/*')
    .get(function(req, res) {
      res.sendfile(app.get('appPath') + '/index.html');
    });
};

express.js as declared in require('./express')(app); is as follows:

/**
 * Express configuration
 */

'use strict';

var express = require('express');
var favicon = require('serve-favicon');
var morgan = require('morgan');
var compression = require('compression');
var bodyParser = require('body-parser');
var methodOverride = require('method-override');
var cookieParser = require('cookie-parser');
var errorHandler = require('errorhandler');
var path = require('path');
var config = require('./environment');
var passport = require('passport');

module.exports = function(app) {
  var env = app.get('env');
  app.set('views', config.root + '/server/views');
  app.engine('html', require('ejs').renderFile);
  app.set('view engine', 'html');
  app.use(compression());
  app.use(bodyParser.urlencoded({ extended: false }));
  app.use(bodyParser.json());
  app.use(methodOverride());
  app.use(cookieParser());
  app.use(passport.initialize());
  if ('production' === env) {
    app.use(favicon(path.join(config.root, 'public', 'favicon.ico')));
    app.use(express.static(path.join(config.root, 'public')));
    app.set('appPath', config.root + '/public');
    app.use(morgan('dev'));
  }

  if ('development' === env || 'test' === env) {
    app.use(require('connect-livereload')());
    app.use(express.static(path.join(config.root, '.tmp')));
    app.use(express.static(path.join(config.root, 'client')));
    app.set('appPath', 'client');
    app.use(morgan('dev'));
    app.use(errorHandler()); // Error handler - has to be last
  }
};

but no matter where i declare any of these:

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

it doesn't work I get:

XMLHttpRequest cannot load http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20yahoo.financ…5.NYM%22)&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:9000' is therefore not allowed access.

Unless your nodeJS server runs at http://query.yahooapis.com, adding response "access-control-allow-*" headers to your server code does not fix your "Same origin policy" problem. Use JSONP for accessing "foreign" servers from your client side code: http://stackoverflow.com/questions/10375946/yahoo-forecastjson-gives-xml-error — Capricorn, Dec 06 '14 at 23:54
I'm allready returning jsonp the weird thing is that this is working I think it's a setting in the app adding a authorization header... — vimes1984, Dec 07 '14 at 00:01

score 5 · Accepted Answer · answered Dec 07 '14 at 04:49

You need to enable CORS middleware in your node-express application. You can do it by adding

"cors": "^2.5.1",

to your dependencies in package.json & in app module,

var cors = require('cors');
//add cors to do the cross site requests
app.use(cors());

enable CORS on angular-fullstack generator?

1 Answers1