Problème CORS lors de la combinaison AngularJS avec PassportJS

Question

J'essaie de combiner ExpressJS + PassportJS avec l'application Angular SPA. Le problème est probablement dans les en-têtes CORS.

Voici ce que je suis en train d'accomplir:

client Voir:

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

contrôleur client:

Est-ce l'approche suivante correcte?

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

Le côté serveur responsable de l'authentification de manipulation se présente comme suit:

routes serveur:

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

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

stratégie 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); 
})); 

utilisateurs du serveur contrôleur:

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

Lorsque je clique sur Sign in with Twitter dans un navigateur (Chrome/Firefox) Je vois les demandes suivantes sont faites:

1. GET http://localhost:3000/oauth/twitter (302 moved temporarily)
2. GET https://api.twitter.com/oauth/authenticate?oauth_token=Zz014AAAAAAAg5HgAA ******** (307 redirection interne)

r se plaint de l'absence des en-têtes "Access-Control-Allow-Origin".

Pour résoudre ce problème, je l'ai essayé d'utiliser package cors comme celui-ci

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

et réglage également manuellement en-têtes de toutes les réponses, sans effet.

Pourriez-vous s'il vous plaît me montrer le chemin? Cordialement

Answer 1

Au lieu d'utiliser le module de CORS, essayez de mettre la tête dans nodejs

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

Je face à un problème similaire et ne pouvait pas fixer dans le code. J'ai donc trouvé cette extension Chrome: Allow-Control-Allow-Origin: *

Vous pouvez définir des modèles d'URL et activer le partage de ressources d'origine croisée. N'oubliez pas de le désactiver lorsque vous avez terminé votre travail!