Passport Google OAuth2.0无法跳转至谷歌登录页面问题排查

你的问题核心是Express路由与React路由的端口/代理冲突，导致/auth/google请求没有被Express处理，反而被React路由接管返回404。以下是具体原因和解决步骤：

核心原因：端口与代理配置缺失 #

你的Express服务器运行在5000端口（port = process.env.PORT || 5000），但如果你在浏览器访问的是React开发服务器的3000端口（localhost:3000/auth/google），这个请求会直接进入React路由体系——而React路由中没有定义/auth/google路径，自然返回404。

解决方案 #

1. 配置React代理，转发请求到Express #

在React项目的package.json中添加一行代理配置，让React开发服务器将无法匹配的请求转发到Express服务器：

"proxy": "http://localhost:5000"

添加后，所有localhost:3000/api/*、localhost:3000/auth/*这类请求都会被自动转发到localhost:5000，由Express处理。

2. 修正Google OAuth回调URL的端口 #

你当前的callbackURL设置为http://localhost:3000/auth/google/bindrake，但授权完成后的回调请求需要由Express处理，所以应该改为Express的端口：

callbackURL: "http://localhost:5000/auth/google/bindrake"

同时要确保在Google开发者控制台中，将这个回调URL添加到授权的重定向URI列表中。

3. 验证路由顺序（当前配置已正确，可忽略） #

你的Express路由顺序是正确的：先定义/auth/google，再设置通配符*返回React的index.html。Express会按顺序匹配路由，所以/auth/google会优先被处理，不会被通配符路由覆盖。

验证步骤 #

1. 重启React开发服务器和Express服务器
2. 在浏览器访问localhost:3000/auth/google，此时请求会被代理到Express，应该能跳转到谷歌授权页面
3. 如果直接访问localhost:5000/auth/google可以正常跳转，但localhost:3000不行，说明代理配置未生效，请检查package.json的代理配置是否正确

内容的提问来源于stack exchange，提问作者Bot Ellis