błąd CORS z funkcją Facebook zwrotnej

Question

Mam następujący kod:

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') 
}) 

kątowa część:

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

mam zawsze ten błąd i zrobił kilka prób ale bez powodzenia.

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. 

Czy ktoś ma jakiś pomysł? Zrobiłem to wyłącznie w kanciastym, ale potem nie działa w Safari, ale w Chrome i FF działa idealnie.

www.mylocal.com:3000 = localhost: 3000

Answer 1

Nie znajdzie rozwiązanie z języków po stronie klienta, jak to stanowi wniosek przekroju pochodzenia, które mogłyby zostać wykorzystane jako złośliwego ataku. Zasadniczo więc punkt końcowy Facebooka musiałby mieć blok nagłówka Access-Control-Allow-Origin i nie sądzę, że zrobią to w najbliższym czasie. Używam API dużo i często trzeba tez mieć nagłówków określonych w moim końcowym więc moi klienci mogą łączyć się z localhost lub dev adresów 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; 

Można również spróbować tego w $ http Broker:

 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

Mam aplikację Angular z wyrażeniem na zapleczu. Po kliknięciu na przycisk z tym HTML:

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

To dało mi błąd CORS:

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

Problem polega na tym, chciałem uzyskać token z powrotem, więc mogłem zapisać go w localStorage. Zrobiłem to, ale rozwiązanie jest okrężne. W funkcji socialLogIn, otworzyłem się nowe okno:

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

w wyraźnej zaplecza, po I got my „rzeczy” z Facebook lub Google i stworzyłem token, wysłałem z powrotem jakiś kod, który zapisany znacznik, ponownie załadował okno nadrzędne i zamknął się:

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