Ruby/Rails集成Google登录报错：给定来源不允许使用该客户端ID

问题描述 #

我在给Ruby/Rails应用集成Google登录时，按官方指南完成了OAuth配置，登录按钮和字段显示正常，但输入有效凭证后无响应，弹出错误：

The given origin is not allowed for the given client ID.

本地测试时已经在「已授权JavaScript来源」中添加了http://localhost和http://localhost:3000，但实际页面URL是xxxx.localhost:3000，推测是域名不匹配导致的问题。Google OAuth不支持泛子域名，求解决办法。

使用的代码片段：

<div id="g_id_onload"
     data-client_id="XXXXX"
     data-context="signin"
     data-ux_mode="popup"
     data-login_uri="http://localhost:3000"
     data-auto_prompt="false">
</div>

<div class="g_id_signin"
     data-type="standard"
     data-shape="rectangular"
     data-theme="outline"
     data-text="signin_with"
     data-size="large"
     data-logo_alignment="left">
</div>

<script src="https://accounts.google.com/gsi/client" async defer></script>

可行解决方法 #

1. 添加特定子域名到授权来源 #

Google OAuth支持明确指定子域名，只需把实际使用的子域名添加到授权列表：

• 打开Google Cloud Console，找到对应的OAuth 2.0客户端ID配置
• 在「已授权JavaScript来源」中新增http://xxxx.localhost:3000
• 保存配置后，等待5-10分钟让配置生效（Google的配置有时会有延迟）
• 同时确保本地hosts文件中已将xxxx.localhost映射到127.0.0.1：
  • Mac/Linux：编辑/etc/hosts，添加127.0.0.1 xxxx.localhost
  • Windows：编辑C:\Windows\System32\drivers\etc\hosts，添加同样内容

2. 临时切换到无分域名的localhost测试 #

如果只是验证登录逻辑是否正常，可以临时把登录页面放到http://localhost:3000路径下，避开子域名问题，等逻辑跑通后再适配子域名场景。

3. 反向代理统一域名（适合长期子域名测试） #

如果需要长期在子域名下测试，可以用Nginx做反向代理：

• 配置Nginx监听xxxx.localhost:3000，将请求转发到localhost:3000
• 确保代理时保留正确的Host头，避免Rails识别错误的来源
• 这种方式需要额外配置代理，但能模拟线上子域名环境

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