Question

在尝试使用NodeJS / Express中的Passport对Facebook用户进行身份验证时，尝试启用CORS已经过了两天和一百万次尝试。

我在Chrome上遇到的错误是：

XMLHttpRequest cannot load https://www.facebook.com/dialog/oauth?response_type=code&redirect_uri=http%…%3A8080%2Fauth%2Ffacebook%2Fcallback&scope=email&client_id=598171076960591. 
No 'Access-Control-Allow-Origin' header is present on the requested resource. 
Origin 'http://localhost:8080' is therefore not allowed access.

我使用的路线很简单：

// =====================================
// FACEBOOK ROUTES =====================
// =====================================
// route for facebook authentication and login

app.get('/auth/facebook', passport.authenticate('facebook', { scope : 'email' }));

// handle the callback after facebook has authenticated the user
app.get('/auth/facebook/callback',
    passport.authenticate('facebook', {
        successRedirect : '/home',
        failureRedirect : '/login'
    }));

这是在我的angularJS文件上调用路由的方式（我也尝试过使用了问题：true）：

$http.get('/auth/facebook')
    .success(function(response) {

    }).error(function(response){

    });

我在StackOverflow和其他论坛上尝试了十几个解决方案。

我尝试在routes.js文件中的路线之前添加它：

app.all('*', function(req, res, next) {
  res.header('Access-Control-Allow-Origin', '*');
  res.header("Access-Control-Allow-Headers", "Content-Type,X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5,  Date, X-Api-Version, X-File-Name");
  res.header('Access-Control-Allow-Methods', 'GET,POST,PUT,HEAD,DELETE,OPTIONS');
  res.header('Access-Control-Allow-Credentials', true);

  if ('OPTIONS' == req.method) {
      res.send(200);
  } else {
      next();
  }
});

我尝试在server.js文件中添加此文件（请注意，我已将标题更改为setHeader，但我已尝试过两种方法）：

app.use(function(req, res, next) {
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type,X-Requested-With');
  res.setHeader('Access-Control-Allow-Methods', 'GET,POST,PUT,HEAD,DELETE,OPTIONS');
  res.setHeader('Access-Control-Allow-Credentials', true);

  if ('OPTIONS' == req.method) {
    res.send(200);
  } else {
    next();
  }

 });

 require('./app/routes.js')(app, passport);

我尝试在app.js文件（angularJS配置）中添加：

$httpProvider.defaults.useXDomain = true;
delete $httpProvider.defaults.headers.common['X-Requested-With'];
$httpProvider.defaults.withCredentials = true;

无论如何，我不知道还能做什么。我在网上发现的一切都不起作用。有可能它与我使用AngularJS路由有关吗？我认为没有任何理由可以解决这个问题，但我还是没有猜测。

我的情况与此非常相似： Angular/Node/Express/Passport - Issues when connecting to facebook(CORS)

提前致谢！

Answer 1

我遇到了这个问题，几乎达到了我确信无法找到解决方案的程度，但再次查看一个简单的教程（http://mherman.org/blog/2013/11/10/social-authentication-with-passport-dot-js/）就为我解决了这个问题。我试图从Angular到Node.js进行API调用，无论你在服务器上配置了什么，CORS都会给你带来那些XMLHttpRequest错误！ CORS不是固定设置 - 如果您打开Chrome网络控制台，您会发现您对Google或Facebook或任何第三方网站的请求无法控制进行更改 - 它是由发送的302重定向触发的回到你的前端，Angular.js或任何其他框架无法控制的东西，因此你无法真正添加＆＃34;访问控制允许来源＆＃34;无论如何，对那个要求。

解决方案只是制作按钮或文字，用＆_ 34;登录_____＆＃34;一条链接。文字<a href="/auth/facebook"></a>链接。那就是它。

当然，我还遇到了很多其他绊脚石和陷阱。我试图不使用passport.authenticate（＆＃39; facebook＆＃39;）的默认中间件，但试图将其包装在function(req, res, next){ ... }中，认为可以做某事，但事实并非如此。

Answer 2

我还有facebook登录和cors的问题，但在NodeJS / Express中没有Passport，我的应用程序是java（spring mvc）+ angular。我设法修改了修改我的初始fb登录功能的问题：

$scope.loginWithFacebook = function () {
    $http({
        method: 'GET',
        url: 'auth/facebook',
        dataType: 'jsonp'
    }).success(function(data){
        console.log('loginWithFacebook success: ', data);
    }).error(function(data, status, headers, config) {
        console.log('loginWithFacebook error: ', data);
    });
}

与

$scope.loginWithFacebook = function() {
    $window.location = $window.location.protocol + "//" + $window.location.host + $window.location.pathname + "auth/facebook";
};

希望它有所帮助！

Answer 3

创建一个html标签来代替GET请求，facebook不允许XMLHttpsRequests。

像这样： <a href="http://localhost:8080/auth/facebook">sign in with facebook</a>

Angular / Node / Express / Passport跨域问题 - 启用CORS Passport Facebook身份验证

3 个答案: