errore CORS con la funzione di callback Facebook

Question

Ho il seguente codice:

app.js:

var passport = require('passport') 
    , FacebookStrategy = require('passport-facebook').Strategy 
    , ... 
passport.serializeUser(function(user, done) { 
    console.log('serializing user') 
    done(null, user); 
}) 
passport.deserializeUser(function(obj, done) { 
    console.log('deserializeUser') 
    done(null, obj) 
}) 
passport.use(new FacebookStrategy({ 
    clientID: FBAPP.id, 
    clientSecret: FBAPP.secret, 
    callbackURL: 
     "http://www.mylocal.com:3000/auth/facebook/callback" 
    }, 
    function(accessToken, refreshToken, profile, done) { 
    // asynchronous verification, for effect... 
    process.nextTick(function() { 
     return done(null, profile) 
    }) 
    } 
)) 
app.get('/auth/facebook', passport.authenticate('facebook', 
    { scope: ['email, user_likes, user_photos, publish_actions'] })) 
app.get('/auth/facebook/callback', 
passport.authenticate('facebook', { 
    successRedirect: '/loginsuccess', failureRedirect : '/loginfail' })) 
app.get('loginsuccess', function(req, res) { 
    console.log('Login success') 
    res.send(200, 'ok') 
}) 
app.get('/loginfail', function(req, res) { 
    console.log('Login error') 
    res.send(401, 'error') 
}) 

La parte angolare:

factory('FacebookFactory', ['$http', '$q', function($http, $q) { 
    var get = function() { 
     var deferred = $q.defer(); 
     $http({method: 'GET', url: '/auth/facebook'}). 
     success(function(data, status, headers, config) { 
      deferred.resolve(data); 
     }). 
     error(function(data, status, headers, config) { 
      deferred.reject(data); 
     }); 
     return deferred.promise; 
    }; 
    return { 
     get: get 
    }; 
}]) 

ottengo sempre questo errore e ha fatto diversi tentativi ma nessun successo.

XMLHttpRequest cannot load https://www.facebook.com/dialog/oauth? 
response_type=code&redirect_uri=http%… 
user_likes%2C%20user_photos%2C%20publish_actions&client_id=xxxxxxxxxxx. 
No 'Access-Control-Allow-Origin' header 
is present on the requested resource. Origin '[basic 
links]http://www.mylocal.com:3000' is therefore 
not allowed access. 

Qualcuno ha qualche idea? L'ho provato solo in angolare ma poi non funziona in Safari ma in Chrome e FF funziona perfettamente.

www.mylocal.com:3000 = localhost: 3000

Answer 1

Non troverete una soluzione con linguaggi lato client come questo costituisca una richiesta di cross-origine, che potrebbe essere utilizzato come un attacco dannoso. Quindi, in pratica, l'endpoint di Facebook avrebbe bisogno di avere un blocco di intestazione Access-Control-Allow-Origin e non credo che lo faranno presto. Io uso API molto e spesso avere tesi intestazioni fissati nel mio endpoint così i miei clienti possono connettersi da localhost o dev gli URL:

if (isset($_SERVER['HTTP_ORIGIN'])): 
     header("Access-Control-Allow-Origin: {$_SERVER['HTTP_ORIGIN']}"); 
     header('Access-Control-Allow-Credentials: true'); 
     header('Access-Control-Max-Age: 86400'); 
    endif; 
    if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS'): 
     if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_METHOD'])): 
      header('Access-Control-Allow-Methods: GET, POST, OPTIONS, DELETE, PUT'); 
     endif; 
     if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS'])): 
      header("Access-Control-Allow-Headers: {$_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']}"); 
     endif; 
     exit(0); 
    endif; 

Si potrebbe anche provare questo nel tuo $ http mediatore:

 var promise = $http({ 
      method: 'POST', 
      url: 'url_to_api', 
      data: params, 
      headers: { 
       'Access-Control-Allow-Origin': true, 
       'Content-Type': 'application/json' 
      } 
     }).success(function (data, status, headers, config) { 
      return data; 
     }); 

Answer 2

Ho un'app Angolare con Express sul back-end. Quando ho cliccato su un pulsante con questo HTML:

<input type="button" ng-click="socialLogIn('facebook')" class="modal-input" value="Sign in with Facebook"> 

Mi ha dato un errore di CORS:

$scope.socialLogIn = function (social) { 
    return $http.get ('/auth/'+social).success (function (data) { 
     auth.saveToken (data.token); // write data to local storage 
    }); 

problema è che ho voluto ottenere il token di nuovo così ho potuto salvarlo in localStorage. L'ho risolto, ma la soluzione è rotonda. Nella funzione socialLogIn, ho aperto una nuova finestra:

$scope.socialLogIn = function (social) { 
    var url = 'http://' + $window.location.host + '/auth/' + social; 
    $window.open(url); 
}; 

Nel backend espresso, dopo che ho ottenuto il mio 'roba' da Facebook o Google e ho creato il token, ho mandato indietro un codice che ha salvato il token, ricaricato la finestra genitore e chiuso da solo:

function loginReturn (res, token) { 
    var returnString = '' + 
      '<!DOCTYPE html>\n' + 
      '<html>\n' + 
      '<head>\n' + 
       '<meta charset="UTF-8">\n' + 
       '<title>Login</title>\n' + 
      '</head>\n' + 
      '<body>\n' + 
      '<script type="text/javascript">\n' + 
       'window.localStorage[\'token\'] = \''+token+'\';\n' + 
       'window.opener.location.reload(false);\n' + 
       'window.close();\n' + 
      '</script>\n' + 
      '</body>\n' + 
      '</html>'; 

    res.send(returnString); 
};