MEAN堆栈Facebook授权错误：没有“访问控制允许来源”标题？
我正在尝试在我的MEAN堆栈应用程序上进行Facebook授权。 我正在使用passport和passport-facebook 。 我不使用jade或ejs ，我想使用纯粹的angularjs。 当我运行我的应用程序，并点击“login”button，我得到以下错误：
XMLHttpRequest cannot load https://www.facebook.com/dialog/oauth?response_type=code&redirect_uri=http%…2Flocalhost%3A3030%2Fauth%2Ffacebook%2Fcallback&client_id=.... No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3030' is therefore not allowed access.
我做了一些研究，发现node cors模块可以解决这个问题，但是没有。
我做错了什么，我该如何解决？
这里是我的routes.js文件（服务器端）：
app.get('/auth/facebook', passport.authenticate('facebook')); app.get('/auth/facebook/callback', passport.authenticate('facebook', { successRedirect: '/success', failureRedirect: '/error' })); app.post('/success', function(req, res, next) { User.findById(req.session.passport.user, function(err, user) { if(err){ res.send({success:false}); }else{ res.send({success:true,user: user}); } }); }); app.get('/logout', function(req, res){ req.logout(); res.redirect('/'); res.end(); }); app.post('/error', function(req, res, next) { res.send({success:false}); });
这是我的passport.js文件（服务器端）：
注意： clientID ， clientSectret和callbackURL位于另一个文件（ config.js ）中。 但他们是有效的。
passport.use(new FacebookStrategy({ clientID: config.facebookAuth.clientID, clientSecret: config.facebookAuth.clientSecret, callbackURL: config.facebookAuth.callbackURL }, function(accessToken, refreshToken, profile, done) { User.findOne({ oauthID: profile.id }, function(err, user) { if(err) { console.log(err); } if (!err && user != null) { done(null, user); } else { var user = new User({ oauthID: profile.id, name: profile.displayName, created: Date.now() }); user.save(function(err) { if(err) { console.log(err); } else { console.log("saving user ..."); done(null, user); } }); } }); } )); // serialize and deserialize passport.serializeUser(function(user, done) { console.log('serializeUser: ' + user._id) done(null, user._id); }); passport.deserializeUser(function(id, done) { User.findById(id, function(err, user){ console.log(user) if(!err) {done(null, user);} else {done(err, null)} }); });
这里是我的快速configuration文件： express.js （服务器端）：
var express = require('express'), passport = require('passport'), cookieParser = require('cookie-parser'), bodyParser = require('body-parser'), session = require('express-session'), cors = require('cors'); var whitelist = ['https://www.facebook.com']; var corsOptions = { origin: function(origin, callback){ var originIsWhitelisted = whitelist.indexOf(origin) !== -1; callback(null, originIsWhitelisted); } }; module.exports = function (app, config) { app.set('view engine', 'ejs'); app.use(cookieParser()); app.use(bodyParser()); app.use(cors(corsOptions)); app.use(session({secret:"car advisor secret"})); app.use(passport.initialize()); app.use(passport.session()); app.use(express.static(config.rootPath+"/public")); }
客户端
这是我的html文件：
<body> <div class="navbar-right" ng-controller="LoginCtrl"> <form class="navbar-form" > <a class="btn btn-primary" ng-click="signin()" ng-show="!identity.isAuthenticated()">Sign in</a> <a class="btn btn-primary" ng-click="signout()" ng-show="identity.isAuthenticated()">Sign out | {{identity.currentUser.name}}</a> </form> </div> <ng-view></ng-view>
这是我的login控制器：
$scope.signin = function(username, password) { authService.authenticateUser(username, password).then(function(success) { if (success){ console.log("You have successfully signed in!"); } }); } $scope.signout = function() { authService.logoutUser().then(function() { console.log("You have successfully signed out!"); $location.path('/'); }); }
这里是我处理服务器通信的服务（authService.js）：
carApp.factory('authService', function($http, Identity, $q, $cookieStore, $resource) { return { authenticateUser: function(username, password) { var dfd = $q.defer(); $http.get('/auth/facebook'). success(function(data, status, headers, config) { if (data.success) { Identity.currentUser = response.data.user; $cookieStore.put('user', response.data.user); dfd.resolve(true); } else { $cookieStore.remove('user'); dfd.resolve(false); } }); return dfd.promise; }, logoutUser: function() { var dfd = $q.defer(); $http.get('/logout').success(function() { Identity.currentUser = undefined; $cookieStore.remove('user'); dfd.resolve(); }); return dfd.promise; }
您不能向另一个地址发出ajax请求。 即使地址相同而端口不同，您也会遇到“相同的来源策略”问题。
你可以用nginx来做，并用proxy_passredirect请求。
检查： http : //distinctplace.com/infrastructure/2013/10/14/internal-redirect-to-another-domain-with-proxy_pass-and-nginx/
就像是
server { listen 80; server_name localhost; location /auth/facebook/request { proxy_pass http://(...)facebook.com/(...); } }
我不知道这是否解决了你的问题，但我最近经历了类似的尝试做一个angular度的应用程序的Facebooklogin。 确保在你的Facebook应用程序设置页面，
https://developers.facebook.com/apps/{your_app_id}/settings/
将“网站url”更改为您的本地主机。例如：
http://localhost:8080/
你好，我不知道这是否帮助你尝试
app.config(['$httpProvider', function ($httpProvider){ $httpProvider.defaults.useXDomain = true; // $httpProvider.defaults.cache = true; $httpProvider.defaults.withCredentials = true; // $httpProvider.defaults.xsrfCookieName = ''; // $httpProvider.defaults.xsrfHeaderName = ''; delete $httpProvider.defaults.headers.common['X-Requested-With']; }]);