Angular/Node/Express/Passport 跨域问题 - 启用 CORS Passport Facebook 身份验证
在 NodeJS/Express 中使用 Passport 尝试通过 Facebook 对用户进行身份验证时,已经有两天了,一百万次尝试启用 CORS.
It's been two days and a million tries to enable CORS when trying to authenticate a user with Facebook using Passport in NodeJS/Express.
我在 Chrome 上遇到的错误是:
The error I get on Chrome is this:
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.
我使用的路线就是这么简单:
The routes I use are as simple as that:
// =====================================
// 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 文件中调用路由的方式(我也试过设置 withCredentials : true):
This is how the route is called on my angularJS file (I've also tried setting withCredentials : true):
$http.get('/auth/facebook')
.success(function(response) {
}).error(function(response){
});
我已经尝试了在 StackOverflow 和其他论坛上找到的十几种解决方案.
I've tried a dozen solutions that I found here on StackOverflow and other forums.
我尝试在 routes.js 文件的路由之前添加此内容:
I tried adding this on the before my routes on the routes.js files:
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 文件中添加它(请注意,我将 header 更改为 setHeader,但我已经尝试了两者):
I tried adding this on server.js file (note that I changed header to setHeader but I've tried both):
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 配置)中添加这个:
I tried adding this on my app.js file (angularJS configurations):
$httpProvider.defaults.useXDomain = true;
delete $httpProvider.defaults.headers.common['X-Requested-With'];
$httpProvider.defaults.withCredentials = true;
反正我不知道还能做什么.我在网上找到的所有东西都不起作用.是否有可能与我使用 AngularJS 路由有关?我看不出这有什么重要的原因,但我有点猜不透.
Anyway, I don't know what else to do. Everything I found online didn't work. Is there a chance it has something to do with me using AngularJS Routing? I don't see any reason why this would matter, but I kinda ran out of guesses.
我的情况和这个很相似:Angular/Node/Express/Passport - 连接到 facebook 时的问题(CORS)
My situation is very similar to this one: Angular/Node/Express/Passport - Issues when connecting to facebook(CORS)
提前致谢!
我遇到了这个问题,几乎到了我确信找不到解决方案的地步,但又看了一个简单的教程 (http://mherman.org/blog/2013/11/10/social-authentication-with-passport-dot-js/) 为我解决了这个问题.我试图从 Angular 到 Node.js 进行 API 调用,不管你在服务器上配置了什么,不管你是否配置了 CORS,它总是会给你带来那些 XMLHttpRequest 错误!CORS 不是固定的——如果你打开你的 Chrome 网络控制台,你会发现你对谷歌或 Facebook 或任何 3rd 方站点的请求是你无法控制的更改——它是由 302 重定向触发的,该重定向被发送回您的前端,Angular.js 或任何其他框架无法控制的东西,因此无论如何您都无法真正向该请求添加访问控制允许来源".
I was having this issue and almost reached the point where I was convinced I could find no solution, but looking at a simple tutorial again (http://mherman.org/blog/2013/11/10/social-authentication-with-passport-dot-js/) solved it for me. I was trying to make an API call from Angular to Node.js, which is going to always bring you those XMLHttpRequest errors despite what you configure on the server, CORS or not! CORS is not the fixture - if you opened your Chrome network console, you'll find that your request to Google or Facebook or whatever 3rd party site is out of your control to change - it was triggered from a 302 redirect that was sent back to your frontend, something that Angular.js or any other framework has no power to control, thus you can't really add "Access Control Allow Origin" to that request anyway.
解决方案只是将显示使用 _____ 登录"的按钮或文本设为 LINK.文字 <a href="/auth/facebook"></a>
链接.就是这样.
The solution is simply to make the button or text that says "Sign In with _____" a LINK. A literal <a href="/auth/facebook"></a>
link. That's it.
当然,在这个过程中我也遇到了很多其他的绊脚石和陷阱.我尝试不使用passport.authenticate('facebook') 的默认中间件,而是尝试将其包装在function(req, res, next){ ... }
中,认为可以一些东西,但它没有.
Of course, I also met with a lot of other stumbling blocks and gotchas in the process. I tried to not use the default middleware for passport.authenticate('facebook'), but tried to wrap it in a function(req, res, next){ ... }
, thinking that would do something, but it doesn't.