Cross Domain Origin Problems when deploying Angular Full Stack App on Server

Question

I am really out of knowledge here; I searched GitHub, Google and StackOverflow to an extreme extend on this issue with no resolution.

I have a Angular Fullstack Generator App. This is build as follows:

Node -> Express -> Angular

I am doing nothing out of the ordinary here; my app runs perfectly fine on my development machine in my home. Yet, as soon as I build it, minify it and start it on my server in the Internet via node instead of grunt; I am seeing the html rendered, the css loaded, yet when trying to authenticate (I am using express-jwt for this); I am getting CROSS Domain Origin Problems all over the board.

I am using the CORS Module on npm; that is that one that does not require any setup in order to let everything through, so dont mark this question a duplicate, it is not; i can assure you!

These is how my app.js on my server side basically is constructed:

var express = require('express');
var app     = express();
var config  = require('./config/environment');
var cors    = require('cors');
var server  = require('http').createServer(app);

require('./config/express')(app);
require('./routes')(app);
require('./config/passport')(passport); 

app.use(cors());
app.options('*', cors()); 

require('./routes')(app, passport);

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

exports = module.exports = app;

This is what my browser is showing me:

Cross-Origin-Request blocked: The Same-Origin-Policy....

I do not understand - I am not x-origin requesting anything at all. All the resources are residing on my server. All requests come from one single Browser.

You can see in the response headers:

 access-control-allow-origin: *

Then when signin in an OPTIONS request is send to localhost instead of the FQDN and immediately aborted in red letters.

Answer 1

Cors must be invoked before the routes. This is how I got rid of all CROSS Domain Origin problems once an for all:

var cors    = require('cors');

app.use(cors());
app.options('*', cors()); 

require('./routes')(app);