React项目集成GoogleOAuth时遭遇GSI origin不允许错误求助

以下是具体排查和解决步骤：

1. 确认客户端ID与来源URI的精确匹配 #

• 替换GoogleOAuthProvider里的占位符"myClientID Goes Here"为Google Cloud控制台复制的完整、正确的客户端ID，避免拼写或空格错误。
• 核对本地开发的实际访问地址：React默认启动地址是http://localhost:3000，如果你配置的是https://localhost:3000但实际用http访问，origin会不匹配。要么修改Google Cloud的配置为http://localhost:3000，要么配置React以https模式启动。
• 确保Google Cloud控制台的两个关键配置都正确添加了本地地址：
  • 已获授权的 JavaScript 来源
  • 已获授权的重定向 URI
    地址必须精确，不能省略端口，也不能多打空格或斜杠。

2. 清除浏览器缓存和Cookie #

浏览器可能缓存了旧的OAuth配置，导致新的来源设置不生效。清除对应域名的Cookie和缓存后，重启浏览器再测试。

3. 临时禁用One Tap登录测试 #

One Tap对来源校验规则更严格，先去掉GoogleLogin组件的useOneTap属性，测试基础登录按钮是否正常：

<GoogleLogin
  onSuccess={credentialResponse => {
    console.log(credentialResponse);
  }}
  onError={() => {
    console.log('Login Failed');
  }}
  // 暂时注释useOneTap
  // useOneTap
/>

如果基础按钮正常，再重新开启One Tap，此时可能需要等待Google配置同步（通常需要几分钟）。

4. 检查凭证类型是否正确 #

确保你在Google Cloud创建的是OAuth 2.0 客户端ID，且应用类型选择的是「Web应用」，而非Android、iOS等其他类型。

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