angularjs - Facebook 回调函数出现 CORS 错误

Question

我有以下代码:

应用程序.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')
})

Angular 部分:

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. 

有人知道吗？我确实只在 Angular 上尝试过它，但它在 Safari 中不起作用，但在 Chrome 和 FF 中它运行得很好。

www.mylocal.com:3000 = localhost:3000

Answer 1

您不会找到使用客户端语言的解决方案，因为这构成了可用作恶意攻击的跨域请求。所以基本上 Facebook 端点需要设置一个 Access-Control-Allow-Origin header block ，我认为他们不会很快这样做。我经常使用 API，并且经常必须在我的端点中设置这些 header ，以便我的客户端可以从本地主机或开发 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;

你也可以在你的 $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;
        });