XMLHttpRequest cannot load https://www.facebook.com/dialog/oauth?response_type=code&redirect_uri=

Viewed 4014

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.com/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.common = 'Content-Type: application/json';
        delete $httpProvider.defaults.headers.common['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()

4 Answers

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

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

app.use(cors())
Related