CORS - Facebook - Passport

Question

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.net ' 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"});
    }
});

Answer 1

I 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.

Answer 2

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