angularjs - AngularJS 与 PassportJS 组合时的 CORS 问题

Question

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

这是我想要实现的目标:

客户 View :

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

客户端 Controller :

以下方法正确吗？

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

用户服务器 Controller :

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) 中点击使用 Twitter 登录时，我看到发出以下请求:

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

浏览器提示缺少“Access-Control-Allow-Origin” header 。

为了解决这个问题，我尝试使用像这样的 cors 包

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

并且还手动设置所有响应的 header ，但没有效果。

你能给我指路吗？ 问候

Answer 1

不要使用cors模块，尝试在nodejs中设置 header

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