React服务器端无法使用Google SSO问题求助

问题描述 #

• 使用react-oauth/google包实现Google单点登录
• 本地环境（http://localhost:9998）测试完全正常，能正常显示账户选择弹窗并完成登录
• 部署到服务器（http://example.com:9998）后，Google SSO弹窗无法显示可选账户，调用https://accounts.google.com/gsi/button时返回403错误，控制台提示[GSI_LOGGER]: The given origin is not allowed for the given client
• 已在Google Cloud Console的Credentials中配置以下授权项：
  • Authorized JavaScript origins：http://localhost、http://localhost:9998、http://example.com:9998
  • Authorized redirect URIs：同上
• 已尝试清除浏览器缓存、强制刷新页面、重新创建OAuth凭据，问题依旧，怀疑是否与域名带端口有关？

排查与解决步骤 #

1. 确认凭据类型正确
   确保在Google Cloud Console创建的是「OAuth 2.0客户端ID」，而非服务账号密钥等其他类型。错误的凭据类型会直接导致Origin校验失败。

2. 严格核对地址格式

   • 不要在地址末尾加斜杠（/），比如应填http://example.com:9998而非http://example.com:9998/
   • 确认服务器实际访问协议是http还是https，配置的地址协议必须与实际完全一致
   • 检查域名拼写，避免example.com写成exmaple.com这类低级错误

3. 端口相关注意事项
   Google OAuth支持带端口的域名，但需注意：

   • 非80/443的非常规端口必须明确写在授权地址中，确保与服务器实际访问端口完全匹配
   • 若服务器使用反向代理（如Nginx），需确认代理是否保留了原始Host和端口信息，避免代理后实际访问地址与配置不一致

4. 等待配置生效
   Google Cloud Console的凭据配置有时不会立即生效，最多可能需要10-15分钟。可等待一段时间后重试，或重新保存配置触发同步。

5. 验证请求Origin
   打开浏览器开发者工具「网络」面板，找到调用https://accounts.google.com/gsi/button的请求，查看请求头中的Origin字段，确认该值与Google Cloud Console配置的地址完全一致。若不一致，需调整配置或服务器访问地址。

6. 核对代码中的Client ID
   确保代码中传入的Client ID是服务器环境对应的凭据ID，避免把本地测试的Client ID带到生产环境。建议用环境变量区分不同环境的配置：

   const clientId = process.env.REACT_APP_GOOGLE_CLIENT_ID;
   

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