Angular/Node/Express/Passport Cross Domain Problems - Enable CORS Passport Facebook Authentication

Question

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.

The error I get on Chrome i

Answer 1

I had also a problem with facebook login and cors but not with Passport in NodeJS/Express, my application is java(spring mvc)+ angular. I've managed to pass over the problem modifying my initial fb login function:

$scope.loginWithFacebook = function () {
    $http({
        method: 'GET',
        url: 'auth/facebook',
        dataType: 'jsonp'
    }).success(function(data){
        console.log('loginWithFacebook success: ', data);
    }).error(function(data, status, headers, config) {
        console.log('loginWithFacebook error: ', data);
    });
}

with

$scope.loginWithFacebook = function() {
    $window.location = $window.location.protocol + "//" + $window.location.host + $window.location.pathname + "auth/facebook";
};

Hope it helps!

Answer 2

I was having this issue and almost reached the point where I was convinced I could find no solution, but looking at a simple tutorial again (http://mherman.org/blog/2013/11/10/social-authentication-with-passport-dot-js/) solved it for me. I was trying to make an API call from Angular to Node.js, which is going to always bring you those XMLHttpRequest errors despite what you configure on the server, CORS or not! CORS is not the fixture - if you opened your Chrome network console, you'll find that your request to Google or Facebook or whatever 3rd party site is out of your control to change - it was triggered from a 302 redirect that was sent back to your frontend, something that Angular.js or any other framework has no power to control, thus you can't really add "Access Control Allow Origin" to that request anyway.

The solution is simply to make the button or text that says "Sign In with _____" a LINK. A literal <a href="/auth/facebook"></a> link. That's it.

Of course, I also met with a lot of other stumbling blocks and gotchas in the process. I tried to not use the default middleware for passport.authenticate('facebook'), but tried to wrap it in a function(req, res, next){ ... }, thinking that would do something, but it doesn't.

Answer 3

Create a html tag to do the GET request instead, facebook does not allow XMLHttpsRequests.

Like so: <a href="http://localhost:8080/auth/facebook">sign in with facebook</a>