Flask/React应用Heroku部署后Google Auth无法使用问题求助

核心故障排查 #

针对Error 401: invalid_client The OAuth client was not found.错误 #

这个错误的核心原因是Google认证服务无法识别你传入的OAuth客户端ID，按以下步骤排查：

• 确认Heroku后台Config Vars中配置的Google Client ID变量名，与代码中读取的变量名完全一致，区分大小写。特别注意：React生产环境只会注入以REACT_APP_开头的环境变量，其他前缀的变量打包后会被自动移除，必须确保前端读取的Client ID变量名符合该规则
• 确认.gitignore文件已排除.env文件，避免本地测试用的Client ID配置被提交到仓库，部署后覆盖Heroku的环境变量配置
• 确认你在Google Cloud控制台创建的是Web应用类型的OAuth凭据，不是移动端、桌面端等其他类型的凭据
• 确认Flask后端读取的Google Client ID、Client Secret变量名，与Heroku Config Vars中配置的变量名完全一致

针对Error 400: redirect_uri_mismatch错误 #

该错误是因为请求中携带的重定向URI与Google Cloud控制台配置的内容不完全匹配，差一个字符都会触发报错：

• 你在Google Cloud控制台「重定向URI」列表中，不能只配置根域名https://astrogram-jeff.herokuapp.com，必须填写代码发起OAuth请求时传入的完整回调路径，例如如果后端回调接口是/login/google/callback，就需要完整配置https://astrogram-jeff.herokuapp.com/login/google/callback，注意末尾是否有斜杠、http/https协议头必须和实际请求完全一致
• 确认Google Cloud控制台「已获授权的 JavaScript 来源」中，同时添加了https://astrogram-jeff.herokuapp.com和https://astrogram-jeff.herokuapp.com/（带尾斜杠版本）

次要故障（Google登录按钮偶发禁用）排查 #

该问题是前端SDK加载时序异常导致的：

• 路由切换时Google Identity Services SDK可能还未加载完成就触发了按钮初始化，导致状态异常。可以添加SDK加载完成的状态判断，只有SDK加载完成后才渲染Google登录按钮，或者在路由切换回调中重新执行按钮初始化逻辑即可解决。

内容的提问来源于stack exchange，提问作者Adilson Jurado