如何将facebook身份验证添加到我的反应应用程序？

我正在使用express作为后端。我在后端实现了facebook身份验证。

router.get('/login/facebook',
  passport.authenticate('facebook',{scope:['email']}));

router.get('/login/facebook/callback',
    passport.authenticate('facebook',{
        successRedirect : '/home',
        failureRedirect:'/'
})

);

现在我想通过我的反应应用程序来调用它，这样当用户登陆主页时，首先他应该通过facebook进行身份验证，然后才能看到主页。我怎样才能做到这一点 ？

我尝试使用react-router，但我无法理解如何使用react-router调用后端。我还使用fetch命令获取/ login / facebook：

componentDidMount(){
    fetch("127.0.0.1:3001/login/facebook");

但它给了我CORS错误。

我的反应应用程序位于127.0.0.1:3000，快速服务器位于127.0.0.1:3001。

如果此问题仅在开发模式下，那么Daniel的答案是正确的。

在任何情况下，我建议避免直接从：3000应用程序调用：3001 api。这就是我要做的。

我将编辑fetch调用，如下所示，

componentDidMount(){
    fetch("/login/facebook");
}

该调用将由后端接收，后端为反应应用程序提供服务。现在有三种情况，

案例1：您的文件服务应用程序将具有可以将请求转发到API的代理方法。例如，读它here

案例2这是我推荐的方法。我只需在：3000服务器中编写身份验证逻辑，并仅使用：3001 API来处理应用程序的业务逻辑。

案例3：如果你有一个后端应用程序（：3000），比如使用expressJs编写，你可以将请求转发到：3001 API。这是一个示例代码，

client.send({
    method: req.method,
    path: req.url,
    data: req.body,
    params: req.params
}).then( (response) => {
    // Something
}).catch( (err) => {
    // Handle error
});

这里客户端是一个使用request模块进行HTTP调用的模块。您可以将上述调用实现为快速中间件，以将其用于所有HTTP调用。