lỗi CORS với chức năng Facebook callback

Question

Tôi có đoạn mã sau:

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

Phần góc:

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

tôi nhận được luôn lỗi này và đã làm nhiều lần nhưng không thành công.

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. 

Bất kỳ ai có ý tưởng? Tôi đã thử nó chỉ trong góc cạnh nhưng sau đó nó không hoạt động trong Safari nhưng trong Chrome và FF nó hoạt động hoàn hảo.

www.mylocal.com:3000 = localhost: 3000

Answer 1

Bạn sẽ không tìm thấy một giải pháp với các ngôn ngữ phía khách hàng vì điều này tạo thành một yêu cầu cross-nguồn gốc có thể được sử dụng như là một cuộc tấn công độc hại. Vì vậy, về cơ bản các điểm cuối Facebook sẽ cần phải có một khối tiêu đề Access-Control-Allow-Origin được thiết lập và tôi không nghĩ rằng họ sẽ làm điều đó bất cứ lúc nào sớm. Tôi sử dụng API rất nhiều và thường xuyên phải có đề tài tiêu đề đặt trong thiết bị đầu cuối của tôi vì vậy khách hàng của tôi có thể kết nối từ localhost hoặc dev 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; 

Bạn cũng có thể thử điều này trong http môi giới của bạn $:

 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

Tôi có một ứng dụng Góc với tốc độ trên phần phụ trợ. Khi tôi nhấp vào một nút với HTML này:

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

Nó đã cho tôi một lỗi CORS:

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

Vấn đề là, tôi muốn có mã thông báo trở lại để tôi có thể lưu nó trong localStorage. Tôi đã giải quyết nó, nhưng giải pháp là vòng quanh. Trong chức năng socialLogIn, tôi mở một cửa sổ mới:

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

trong backend nhanh, sau khi tôi nhận được 'thứ' của tôi từ Facebook hay Google và tôi đã tạo được dấu hiệu, tôi đã gửi lại một số mã đã cứu được dấu hiệu, đã tải lại cửa sổ chính và đóng cửa sổ chính:

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