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.

任何人都有任何想法？我确实只是在角度尝试它，但它在Safari中不起作用，但在Chrome和FF中它完美地工作。

www.mylocal.com:3000 = localhost：3000

Answer 1

您将找不到使用客户端语言的解决方案，因为这构成了可能被用作恶意攻击的跨源请求。所以基本上Facebook端点需要设置一个Access-Control-Allow-Origin标头块，我认为它们不会很快就会这样做。我使用API很多，并经常必须在我的端点设置这些标头，以便我的客户端可以从localhost或dev urls连接：

    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

我在后端有一个带有express的Angular应用程序。当我点击带有此HTML的按钮时：

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

它给了我一个CORS错误：

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

问题是，我想取回令牌，以便将其保存在localStorage中。我确实解决了它，但解决方案是圆形的。在socialLogIn函数中，我打开了一个新窗口：

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

在快递后端，我得到了我的东西后＃39;我从Facebook或Google创建了令牌，我发回了一些保存令牌的代码，重新加载了父窗口并自行关闭：

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

Facebook回调函数的CORS错误

2 个答案: