logo标签列表

Facebook回调函数出现CORS错误

angularjsnode.jsfacebookcorspassport.js
8

I have the following code:

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

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

这里也有同样的问题！你找到解决方案了吗？ - Larissa Leite
实际上不是这样的。除了在 Facebook 端重新开始一个新应用程序之外，没有其他办法。虽然它可以工作，但比较并没有显示任何差异。 - Geert Van Laethem
你或许需要使用$http.jsonp()吗？只是猜测。 - Jude Osborn
2个回答
0

我有一个带有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
    });

问题是，我想要取回token以便将其保存在localStorage中。我确实解决了这个问题，但解决方案是迂回的。在socialLogIn函数中，我打开了一个新的窗口：
$scope.socialLogIn = function (social) {
    var url = 'http://' + $window.location.host + '/auth/' + social;
    $window.open(url);
};

在Express后端中，当我从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);
};
0

使用客户端语言无法解决此问题，因为这构成了跨域请求，可能被用作恶意攻击。因此，基本上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;
        });
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接