Passport.js Google策略在React应用中无法正常工作求助

你遇到的问题核心在于：Axios发起的是AJAX异步请求，浏览器不会自动处理这类请求返回的302重定向响应；而直接在浏览器地址栏访问时，是普通的同步GET请求，浏览器会自动跟随重定向跳转到Google的登录页面。

为什么会这样？ #

当你用Axios调用/googleauth接口时，Passport的Google Strategy会返回一个302状态码，指向Google的授权页面，但AJAX请求的重定向不会触发浏览器页面跳转——浏览器只会把重定向后的内容（也就是Google登录页的HTML）作为AJAX响应返回，而不会渲染它。

修复方案 #

你需要让浏览器直接发起同步请求来触发重定向，而不是用AJAX。这里有两种简单的实现方式：

方式1：直接跳转页面（最简单）

修改React端的handleJGoogleLogin方法，放弃Axios，直接让浏览器导航到授权接口：

handleJGoogleLogin(e) {
  e.preventDefault();
  // 直接跳转到后端的Google授权接口
  window.location.href = 'http://localhost:4000/googleauth';
}

方式2：用弹出窗口授权（保留当前页面状态）

如果不想离开当前页面，可以用弹出窗口打开授权页面，处理回调：

handleJGoogleLogin(e) {
  e.preventDefault();
  // 打开弹出窗口
  const authWindow = window.open('http://localhost:4000/googleauth', '_blank', 'width=600,height=600');
  
  // 监听弹出窗口关闭，检查授权结果（需要后端在回调后传递状态）
  const checkAuthStatus = setInterval(() => {
    if (authWindow.closed) {
      clearInterval(checkAuthStatus);
      // 这里可以发起请求获取用户信息，比如调用后端的/user接口
      axios.get('http://localhost:4000/user')
        .then(res => console.log('授权成功', res.data))
        .catch(err => console.log('授权失败', err));
    }
  }, 1000);
}

额外注意事项 #

1. 你的服务器代码里有个小bug：passport.use的回调函数里，err和user变量未定义，应该修改为：

function (accessToken, refreshToken, profile, done) {
  console.log(profile);
  // 这里如果不需要查询数据库，直接返回profile作为用户
  return done(null, profile); 
  // 如果有数据库操作，比如User.findOrCreate，要确保err和user正确传入
}

2. 确保你的Google OAuth控制台里，已添加正确的回调URL，并且callbackURL和控制台配置一致，否则授权后会报错。
3. CORS配置里，Access-Control-Allow-Origin设为*并搭配Access-Control-Allow-Credentials: true是无效的——如果需要传递cookie（比如session），Origin不能是通配符，要指定你的前端域名（比如http://localhost:3000）。

内容的提问来源于stack exchange，提问作者Mangesh Tak