CORS त्रुटि

Question

मैं निम्नलिखित कोड है:

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

कोणीय हिस्सा:

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

मैं हमेशा इस त्रुटि मिलती है और कई प्रयास किया था लेकिन कोई सफलता नहीं।

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. 

कोई भी कोई विचार? मैंने पूरी तरह से कोणीय में कोशिश की लेकिन फिर यह सफारी में काम नहीं करता है लेकिन क्रोम और एफएफ में यह पूरी तरह से काम करता है।

www.mylocal.com:3000 = स्थानीय होस्ट: 3000

Answer 1

के रूप में यह एक पार मूल अनुरोध जो एक दुर्भावनापूर्ण हमले के रूप में इस्तेमाल किया जा सकता का गठन किया आप क्लाइंट साइड भाषाओं के साथ एक समाधान नहीं मिल जाएगा। तो मूल रूप से फेसबुक एंडपॉइंट को एक्सेस-कंट्रोल-ऑर्डर-ऑरिजन हेडर ब्लॉक सेट होना होगा और मुझे नहीं लगता कि वे जल्द ही ऐसा करेंगे। मैं API का उपयोग बहुत है और अक्सर शोध करे मेरी endpoint में सेट हेडर करना होगा ताकि अपने ग्राहकों स्थानीय होस्ट से कनेक्ट या यूआरएल देव कर सकते हैं:

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; 

आप भी अपने $ http दलाल में यह कोशिश कर सकते:

 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

मेरे पास बैकएंड पर व्यक्त के साथ एक कोणीय ऐप है। जब मैं इस HTML के साथ एक बटन पर क्लिक:

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

समस्या है, मैं टोकन वापस मिल तो मैं localStorage में यह बचा सकता है चाहता था:

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

यह मुझे एक CORS त्रुटि दे दी है। मैंने इसे हल किया, लेकिन समाधान चारों ओर है। socialLogIn समारोह में, मैं एक नई विंडो खोला:

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

एक्सप्रेस बैकएंड में, मैं फेसबुक या गूगल से मेरे 'सामान' मिल गया के बाद और मैं टोकन बनाया है, मुझे लगता है कि टोकन बचाया कुछ कोड वापस भेज दिया, पैरेंट विंडो को पुनः लोड किया गया और खुद को बंद कर दिया:

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