title: How to enable CORS between API and angular client
body: <p>We have been trying to set up CORS for a couple of days without success. It would be therefore very much appreciated to know how this is done once and for all.
  What we want to do is:</p>
  
  <p><img src="https://i.stack.imgur.com/dV0Zd.png" alt="enter image description here"></p>
  
  <p>API server (only part of the server of course):</p>
  
  <pre><code> // Config
   app.configure(function () {
     app.use(bodyParser.urlencoded({ extended: false }))
     app.use(bodyParser.json())    
     app.use(express.methodOverride());
     app.use(function(req, res, next) {
       res.header("Access-Control-Allow-Origin", "*");
       res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
       next();
     });
     app.use(express.static(path.join(application_root, "public")));
     app.use(express.errorHandler({ dumpExceptions: true, showStack: true }));
     app.use(app.router);
   });
  </code></pre>
  
  <p>Server for angular app (also only part of the setup):</p>
  
  <pre><code> server.use(gzippo.staticGzip(__dirname + '/public'));
   server.set('view engine', 'ejs');
  
   // Environment
   var ENV = process.argv[2] || 'dev'; // prod or dev
   var port = process.env.PORT || 8080;
  
   // Single Page App (this route handles all other requests (catchall))
   server.all('/*', function(req, res, next) {
     res.set('Content-Type', 'text/html');
     res.render('index', includeFiles); // looks by default in views
   });
  </code></pre>
  
  <p>Angular config:</p>
  
  <pre><code> app.config(['$locationProvider', '$httpProvider', '$urlRouterProvider', '$stateProvider',
      function($locationProvider, $httpProvider, $urlRouterProvider, $stateProvider) {
  
         ... Other stuff ...
  
         // enable CORS
         $httpProvider.defaults.useXDomain = true;
         delete $httpProvider.defaults.headers.common['X-Requested-With'];
  
         ...
  
      }
   ])
  </code></pre>
  
  <p>Currently when we do a request from angular:</p>
  
  <pre><code> $http.post('http://&lt;ip-address&gt;:8889/signin', {email: 'mike@gmail.com', pass: '1234abcd'})
   .success(function(data) {
     console.log(data);
   });
  </code></pre>
  
  <p>we get the following error (on firefox):</p>
  
  <pre><code>Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://&lt;ip-address&gt;/signin. (Reason: CORS preflight channel did not succeed).
  Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://&lt;ip-address&gt;:8889/signin. (Reason: CORS request failed).
  </code></pre>