CORS - Facebook - 护照答案

【问题标题】：CORS - Facebook - PassportCORS - Facebook - 护照
【发布时间】：2017-06-19 13:22:51
【问题描述】：

我正在尝试在我的 Nodejs/Angular/Express/Passport 应用程序中通过 Facebook 实现 OAUTH 登录，但我正在为此苦苦挣扎。

我仍然收到 CORS 错误：

XMLHttpRequest 已被 CORS 策略阻止：请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，不允许访问 Origin 'https://www.xxxxxx.net'。

虽然我已经添加到我的 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();
    }
});

在开发者控制台中，我可以看到“oauth/facebook”GET 调用的标头正在添加“Access-Control-Allow-Origin”等等。

在回调中没有“Access-Control-Allow-Origin”等 - 这是正确的吗？

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

【问题讨论】：

我认为访问令牌是通过标头Authorization发送的；所以你也应该在标头中提供它：res.header('Access-Control-Allow-Headers', 'Authorization, Content-Type'); 通常对于成功的请求，请始终考虑提供这些标头：res.header('Access-Control-Allow-Headers', 'Authorization, Origin, X-Requested-With, Content-Type, Accept');
感谢您的回答 - 但仍然是同样的错误：/
您无法通过 AJAX 加载 FB 登录对话框。您需要直接在顶部窗口实例中调用它（原因很明显，用户需要能够通过地址栏验证他们确实在登录 Facebook，而不是某些钓鱼网站。）
但是我需要从服务器端调用它，因为我还需要生成JWT进行登录授权

标签： javascript node.js facebook express passport.js

【解决方案1】：

跨域资源共享 (CORS) 机制为 Web 服务器提供跨域访问控制，从而实现安全的跨域数据传输。

index.js:（服务器）

const cors = require('cors');
..
..
app.use(cors());

有关使用 cors 的更多信息：npm cors

【讨论】：

【解决方案2】：

我在此设置中遇到了多次失败，导致此失败。

首先你需要用href调用链接“/oauth/facebook/”：

<a href="/oauth/facebook/" class="btn btn-primary"><span class="fa fa-facebook"></span> Login with Facebook</a>

这确保不是 Angular 处理此请求。

它在服务器端调用此路由： router.get('/oauth/facebook/',passport.authenticate('facebook',{ failureRedirect: '/#!/home', 范围：['电子邮件'] }));

哪些回调：

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

在我的情况下，我还需要返回一个登录令牌：您需要自己处理响应并将调用重定向到角度侧的自己的“FB”路由，这基本上只是将我的身份验证密钥带到 Angular 和登录用户。

【讨论】：

如何在前端“自行”处理响应？
我尝试了这种方法，但是 Vue 的路由抓取了 URL，我被发送到一个空白页面，因为没有指定的路径来处理它。