I am trying to integrate facebook login for my app in nodejs, angularjs using passport-facebook module.

I can intergrate facebook authentication without angularjs, but when i use angular http.get('/auth/facebook') i am getting below error

XMLHttpRequest cannot load ;redirect_uri=http%…%2Flocalhost%3A1439%2Fauth%2Ffacebook%2Fcallback&client_id=xxxxxxxx. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:1439' is therefore not allowed access.
app.js:153 err

Below is my angular code

var headers = {
                'Accept': 'text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8',
                'Content-Type': 'text/html'
            };
    $scope.fblogin=function(){
        // $window.location.href='/auth/facebook';
        $http({
         url:'/auth/facebook',
        method:'GET',
       headers: headers
        }).success(function(data){
            console.log(data);
        }).error(function(){
            console.log('err');
        });
    };

pp.config(['$routeProvider','$httpProvider',
  function($routeProvider,$httpProvider) {
        $httpProvider.defaults.useXDomain = true;
        $httpProvider.defaults.headersmon = 'Content-Type: application/json';
        delete $httpProvider.defaults.headersmon['X-Requested-With'];

NodeJs

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();
});

**Note:**I have tried changing multiple header changes for $http.get()

I am trying to integrate facebook login for my app in nodejs, angularjs using passport-facebook module.

I can intergrate facebook authentication without angularjs, but when i use angular http.get('/auth/facebook') i am getting below error

XMLHttpRequest cannot load https://www.facebook./dialog/oauth?response_type=code&redirect_uri=http%…%2Flocalhost%3A1439%2Fauth%2Ffacebook%2Fcallback&client_id=xxxxxxxx. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:1439' is therefore not allowed access.
app.js:153 err

Below is my angular code

var headers = {
                'Accept': 'text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8',
                'Content-Type': 'text/html'
            };
    $scope.fblogin=function(){
        // $window.location.href='/auth/facebook';
        $http({
         url:'/auth/facebook',
        method:'GET',
       headers: headers
        }).success(function(data){
            console.log(data);
        }).error(function(){
            console.log('err');
        });
    };

pp.config(['$routeProvider','$httpProvider',
  function($routeProvider,$httpProvider) {
        $httpProvider.defaults.useXDomain = true;
        $httpProvider.defaults.headers.mon = 'Content-Type: application/json';
        delete $httpProvider.defaults.headers.mon['X-Requested-With'];

NodeJs

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();
});

**Note:**I have tried changing multiple header changes for $http.get()

• javascript
• angularjs
• node.js
• facebook

4 Answers 4

Solution:

The link https://www.facebook./dialog/oauth?... is not designed for calling it as ajax because it must REDIRECT user to facebook login page (so when you call it by ajax then redirect is impossible).

Instead of make ajax request just prepare in html proper element:

<a href="https://www.facebook./dialog/oauth?..." > ... </>

This works :)

This is what I have done to avoid Angular to call facebook auth dialogue API as AJAX request.

Use 'window.location="http://localhost:3000/auth/facebook"'; in your Angular Controller Function from where you send the request to your Express Server which contains passport.authenticate stuff.

Example:

$scope.authFacebook = function() { window.location="http://localhost:3000/facebook" }

You are attempting to make an ajax call to a URL and the browser is rejecting that ajax request because of cross origin security.

There are several possible reasons for this:

1. The domain of that URL doesn't allow cross origin requests.
2. You aren't making the request in a proper way for the cross origin request to succeed.
3. Your request is not formed properly (either targeted at the right URL or sent with the right options).

FYI, your node.js code where you set the allow-origin headers has absolutely nothing to do with the browser code attempting to send an ajax call to Facebook. That code would allow other people's web sites to make cross origin requests to your node.js server.

One thing that is a bit confusing about what you posted is that the URL of the $http() call you show is not the same URL as you are getting in the error message so I'm wondering if you're looking at the wrong code for the error.

This solution works for me, adding to cors to express app

var cors = require('cors')
var app = express()

app.use(cors())