I'm trying to implement OAUTH login via Facebook in my Nodejs/Angular/Express/Passport app but i'm struggeling with it.
I still get the CORS error:
XMLHttpRequest has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '' is therefore not allowed access.
Although i already added to my EXPRESS ROUTER:
router.all('/*', function(req, res, next) {
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
res.header('Access-Control-Allow-Headers', 'Content-Type');
if ('OPTIONS' === req.method) {
res.send(200);
}
else {
next();
}
});
In the Developer Console i can see that the Header for the "oauth/facebook" GET call is adding 'Access-Control-Allow-Origin' and so on.
In the Callback there is no 'Access-Control-Allow-Origin' and so on - is this correct?
router.get('/oauth/facebook/',passport.authenticate('facebook',{
failureRedirect: '/info',
scope:['email']
}));
router.get('/oauth/facebook/callback/', passport.authenticate('facebook',{
failureRedirect: '/info',
successRedirect: '/',
scope:['email']
}),
function(req,res){
if(req.user){
return res.json({token: req.user.generateJWT()});
} else {
return res.status(400).json({message:"Not found"});
}
});
I'm trying to implement OAUTH login via Facebook in my Nodejs/Angular/Express/Passport app but i'm struggeling with it.
I still get the CORS error:
XMLHttpRequest has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://www.xxxxxx' is therefore not allowed access.
Although i already added to my EXPRESS ROUTER:
router.all('/*', function(req, res, next) {
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
res.header('Access-Control-Allow-Headers', 'Content-Type');
if ('OPTIONS' === req.method) {
res.send(200);
}
else {
next();
}
});
In the Developer Console i can see that the Header for the "oauth/facebook" GET call is adding 'Access-Control-Allow-Origin' and so on.
In the Callback there is no 'Access-Control-Allow-Origin' and so on - is this correct?
router.get('/oauth/facebook/',passport.authenticate('facebook',{
failureRedirect: '/info',
scope:['email']
}));
router.get('/oauth/facebook/callback/', passport.authenticate('facebook',{
failureRedirect: '/info',
successRedirect: '/',
scope:['email']
}),
function(req,res){
if(req.user){
return res.json({token: req.user.generateJWT()});
} else {
return res.status(400).json({message:"Not found"});
}
});
-
I think access tokens are send via header
Authorization; so you should also provide it in headers:res.header('Access-Control-Allow-Headers', 'Authorization, Content-Type');In general for a successful request always consider to provide these headers:res.header('Access-Control-Allow-Headers', 'Authorization, Origin, X-Requested-With, Content-Type, Accept');– dNitro Commented Feb 2, 2017 at 13:29 - Thanks for your answer - but still the same error :/ – fdddk23 Commented Feb 2, 2017 at 13:33
- You can not load the FB login dialog via AJAX. You need to call it directly in the top window instance (for the obvious reason that users need to be able to verify via the address bar that they are indeed logging in to Facebook, and not some phishing site.) – C3roe Commented Feb 2, 2017 at 14:12
- But I need to call it from the server side as i also need to generateJWT for login authorization – fdddk23 Commented Feb 2, 2017 at 16:16
2 Answers
Reset to default 11I had multiple failures in this setup which lead to this failure.
First of all you need to call the link "/oauth/facebook/" with href:
<a href="/oauth/facebook/" class="btn btn-primary"><span class="fa fa-facebook"></span> Login with Facebook</a>
This ensures that not angular handles this Request.
It calls this route on the Servers side: router.get('/oauth/facebook/',passport.authenticate('facebook',{ failureRedirect: '/#!/home', scope:['email'] }));
Which callbacks:
router.get('/oauth/facebook/callback/', passport.authenticate('facebook',{
failureRedirect: '/#!/info',
scope:['email']
}),
function(req,res){
if(req.user){
return res.redirect(303, '/#!/fb/' +req.user.generateJWT());
} else {
return res.status(400).json({message:"Not found"});
}
});
In my case I also need to return a Token for login: You need to handle the Response by your own and redirect the call an own 'FB' Route on the angular side, which just basically takes my authentication key to Angular and logins the user.
The Cross-Origin Resource Sharing (CORS) mechanism gives web servers cross-domain access controls, which enable secure cross-domain data transfers.
index.js: (server)
const cors = require('cors');
..
..
app.use(cors());
for more info about using cors: npm cors