title: Angular/Node/Express/Passport Cross Domain Problems - Enable CORS Passport Facebook Authentication
body: <p>It's been two days and a million tries to enable CORS when trying to authenticate a user with Facebook using Passport in NodeJS/Express.</p>
  
  <p>The error I get on Chrome is this:</p>
  
  <pre><code>XMLHttpRequest cannot load https://www.facebook.com/dialog/oauth?response_type=code&amp;redirect_uri=http%…%3A8080%2Fauth%2Ffacebook%2Fcallback&amp;scope=email&amp;client_id=598171076960591. 
  No 'Access-Control-Allow-Origin' header is present on the requested resource. 
  Origin 'http://localhost:8080' is therefore not allowed access. 
  </code></pre>
  
  <p>The routes I use are as simple as that:</p>
  
  <pre><code>// =====================================
  // FACEBOOK ROUTES =====================
  // =====================================
  // route for facebook authentication and login
  
  app.get('/auth/facebook', passport.authenticate('facebook', { scope : 'email' }));
  
  // handle the callback after facebook has authenticated the user
  app.get('/auth/facebook/callback',
      passport.authenticate('facebook', {
          successRedirect : '/home',
          failureRedirect : '/login'
      }));
  </code></pre>
  
  <p>This is how the route is called on my angularJS file (I've also tried setting withCredentials : true):</p>
  
  <pre><code>$http.get('/auth/facebook')
      .success(function(response) {
  
      }).error(function(response){
  
      });
  </code></pre>
  
  <p>I've tried a dozen solutions that I found here on StackOverflow and other forums.</p>
  
  <ol>
  <li><p>I tried adding this on the before my routes on the routes.js files:</p>
  
  <pre><code>app.all('*', function(req, res, next) {
    res.header('Access-Control-Allow-Origin', '*');
    res.header("Access-Control-Allow-Headers", "Content-Type,X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5,  Date, X-Api-Version, X-File-Name");
    res.header('Access-Control-Allow-Methods', 'GET,POST,PUT,HEAD,DELETE,OPTIONS');
    res.header('Access-Control-Allow-Credentials', true);
  
    if ('OPTIONS' == req.method) {
        res.send(200);
    } else {
        next();
    }
  });
  </code></pre></li>
  <li><p>I tried adding this on server.js file (note that I changed header to setHeader but I've tried both):</p>
  
  <pre><code>app.use(function(req, res, next) {
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.setHeader('Access-Control-Allow-Headers', 'Content-Type,X-Requested-With');
    res.setHeader('Access-Control-Allow-Methods', 'GET,POST,PUT,HEAD,DELETE,OPTIONS');
    res.setHeader('Access-Control-Allow-Credentials', true);
  
    if ('OPTIONS' == req.method) {
      res.send(200);
    } else {
      next();
    }
  
   });
  
   require('./app/routes.js')(app, passport);
  </code></pre></li>
  <li><p>I tried adding this on my app.js file (angularJS configurations):</p>
  
  <pre><code>$httpProvider.defaults.useXDomain = true;
  delete $httpProvider.defaults.headers.common['X-Requested-With'];
  $httpProvider.defaults.withCredentials = true;
  </code></pre></li>
  </ol>
  
  <p>Anyway, I don't know what else to do. Everything I found online didn't work. 
  Is there a chance it has something to do with me using AngularJS Routing? I don't see any reason why this would matter, but I kinda ran out of guesses.</p>
  
  <p>My situation is very similar to this one:
  <a href="https://stackoverflow.com/questions/23753965/angular-node-express-passport-issues-when-connecting-to-facebookcors">Angular/Node/Express/Passport - Issues when connecting to facebook(CORS)</a></p>
  
  <p>Thanks in advance!</p>