Passport Google oauth 在 react.js 应用程序上生成“网络错误”

Question

我使用Passport 来实现 Google 登录功能。但是，当我从react 客户端应用程序发送axios 请求时，chrome 控制台上会出现一条错误消息。

客户端 - 反应（在端口 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'})
      })
  }
  )
);

routes/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")
})

Chrome Devtools 网络点击日志：

我已经在 Youtube、Google、Github 和 StackOverflow 上进行了搜索。我不知道该怎么做才能解决这个问题。

Answer 1

查看现有的 Passport 示例，您似乎正在尝试在原始 get 请求中使用中间件，这是不正确的。看看这个例子：https://github.com/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.")
});