CORS – Facebook – Passport

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

Here is Solutions:

We have many solutions to this problem, But we recommend you to use the first solution because it is tested & true solution that will 100% work for you.

Solution 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/" rel="nofollow noreferrer noopener" 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.

Solution 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

Note: Use and implement solution 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply