护照谷歌的OAuth产生的react.js应用“网络错误”

我用Passport实现谷歌登录功能。然而，当我从axios客户端应用程序发送react请求，铬控制台上显示一条错误消息。

客户端 - 反应（在端口3000上运行）：

在SignInForm.js部件Axios的请求（当用户点击登录按钮它被触发）：

googlelogin(){
   axios.get('/api/users/google_auth')
     .then(()=>console.log("success"))
     .catch(err=>console.log(err))
}

在控制台上的错误信息：

Error: Network Error
at createError (createError.js:17)
at XMLHttpRequest.handleError (xhr.js:87)

服务器端 - node.js的（在端口5000上运行）：

passport.js代码：

passport.use(
  new GoogleStrategy({
    clientID: GOOGLE_CLIENT_ID,
    clientSecret: GOOGLE_CLIENT_SECRET,
    callbackURL: '/api/users/google_auth/redirect'  
  },
  (accessToken, refreshToken, profile, done) => {
    console.log("called")
    User.findOne({email: profile.id})
      .then(user => {
        console.log('googleLogin');
        done(null,user);
      })
      .catch(err => {
        done(err,null,{message:'fail'})
      })
  }
  )
);

路由/ API / users.js代码：

router.get('/google_auth',passport.authenticate('google',{
  scope:['profile']
}),()=>{console.log("test")})

router.get('/google_auth/redirect',(req, res)=>{
  res.send("hi")
})

镀铬Devtools网络分路器日志：

我已经在YouTube上搜寻，谷歌，Github上，和StackOverflow上。我不知道该做些什么来解决这个问题。

综观现有护照的例子，它看起来像你想在原来的get请求这是不正确使用的中间件。看看这个例子：https://github/passport/express-4.x-facebook-example/blob/master/server.js。

它的使用Facebook的理所当然，但你可以在自己的登录请求看到他们使用的是解决使用Passport.authenticate而不是使用中间件的请求。

修改API沿着这一线的东西：

router.get('/google_auth', passport.authenticate('google', { scope:['profile'] }));

router.get('/google_auth/redirect', passport.authenticate('google', { failureRedirect: '/login' }), (req, res) => {
  res.send("Logged in.")
});