Question

我试图将ExpressJS + PassportJS与Angular SPA应用程序结合起来。问题可能出在CORS标题中。

以下是我想要完成的事情：

客户视图：

<a class="btn btn-block btn-social btn-twitter" ng-click="twitter()">
    <i class="fa fa-twitter"></i> Sign in with Twitter
</a>

客户端控制器：

以下方法是否正确？

$scope.twitter = function() {
  $http.get('oauth/twitter').then(function(res) {
    // Fetch the user from response and store it somewhere on the client side
  });
};

负责处理身份验证的服务器端如下所示：

服务器路由：

app.get('/oauth/twitter', passport.authenticate('twitter', {
  failureRedirect: '/signin'
}));

app.get('/oauth/twitter/callback', passport.authenticate('twitter', {
  failureRedirect: '/signin',
  successRedirect: '/'
}));

Twitter策略：

passport.use(new TwitterStrategy({
  consumerKey: config.twitter.clientID,
  consumerSecret: config.twitter.clientSecret,
  callbackURL: config.twitter.callbackURL,
  passReqToCallback: true
}, function (req, token, tokenSecret, profile, done) {
  var providerData = profile._json;
  providerData.token = token;
  providerData.tokenSecret = tokenSecret;

  var providerUserProfile = {
    fullName: profile.displayName,
    username: profile.username,
    provider: 'twitter',
    providerId: profile.id,
    providerData: providerData
  };

  users.saveOAuthUserProfile(req, providerUserProfile, done);
}));

用户服务器控制器：

exports.saveOAuthUserProfile = function (req, profile, done) {
  User.findOne({
    provider: profile.provider,
    providerId: profile.providerId
  }, function (err, user) {
    if (err) {
      return done(err);
    } else {
      if (!user) {
        var possibleUsername = profile.username || ((profile.email) ? profile.email.split('@')[0] : '');

        User.findUniqueUsername(possibleUsername, null, function (availableUsername) {
          profile.username = availableUsername;
          user = new User(profile);
          user.fullName = profile.fullName;

          user.save(function (err) {
            if (err) {
              var message = getErrorMessage(err);
              req.flash('error', message);
              return done(err);
            }

            return done(err, user);
          });
        });
      } else {
        return done(err, user);
      }
    }
  });
};

当我在浏览器（Chrome / Firefox）中点击Sign in with Twitter时，我会看到以下请求：

GET http://localhost:3000/oauth/twitter（302暂时移动）
获取https://api.twitter.com/oauth/authenticate?oauth_token=Zz014AAAAAAAg5HgAA ********（307内部重定向）

浏览器抱怨缺少＆＃34; Access-Control-Allow-Origin＆＃34;头。

要解决此问题，我尝试使用cors这样的包

var cors = require('cors');
api.use(cors());

并手动设置所有回复的标题，但不起作用。

Answer 1

尝试在nodejs

中设置标题，而不是使用cors模块

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});

Answer 2

我遇到了类似的问题，无法在代码中修复它。所以我发现了这个Chrome扩展程序：Allow-Control-Allow-Origin: *

您可以设置网址格式并启用跨源资源共享。

不要忘记在完成工作后禁用它！

将AngularJS与PassportJS结合使用时的CORS问题

2 个答案: