Google GSI Client Library data-login_uri请求origin为null致CORS问题求助

是否属于预期行为？ #

请求Origin被设置为null不属于Google GSI的预期行为，正常使用GSI时，向data-login_uri发送的请求Origin应为https://accounts.google.com（popup模式下），出现null通常是环境或配置问题导致的。

解决方案 #

针对不同场景，可采取以下步骤修复：

1. 避免在file://协议环境测试 #

浏览器加载本地HTML文件（file://开头的URL）时，所有跨域请求的Origin会被强制设为null。必须将页面部署到HTTP/HTTPS服务器环境测试，比如：

• 用Node.js、Nginx搭建本地localhost服务
• 上传到正式域名环境

2. 检查data-login_uri配置格式 #

确保data-login_uri的值是完整的绝对URL（包含http://或https://），禁止使用相对路径。例如：

<!-- 正确写法 -->
<div id="g_id_onload"
     data-client_id="GOOGLE_CLIENT_ID"
     data-context="signin"
     data-ux_mode="popup"
     data-login_uri="https://your-domain.com/api/google-login"
     data-itp_support="true">
</div>

3. 适配浏览器隐私限制 #

部分浏览器的严格隐私策略（如Safari ITP、Chrome隐私沙箱）可能干扰Origin传递：

• 已设置data-itp_support="true"，可尝试清除浏览器缓存、Cookie后重新测试
• 换用其他主流浏览器（如Chrome、Firefox）验证是否为浏览器特定问题

4. 配置后端CORS策略允许正确Origin #

Google GSI的popup模式下，是https://accounts.google.com向你的login_uri发送请求，因此后端CORS策略需将该域名加入允许列表，而非使用*。示例后端配置逻辑：

// 以Node.js Express为例
const cors = require('cors');
app.use(cors({
  origin: 'https://accounts.google.com',
  methods: ['POST'],
  allowedHeaders: ['Content-Type']
}));

原问题代码片段 #

<script src="https://accounts.google.com/gsi/client" async></script>
<div id="g_id_onload"
     data-client_id="GOOGLE_CLIENT_ID"
     data-context="signin"
     data-ux_mode="popup"
     data-login_uri="LOGIN_URI"
     data-itp_support="true">
</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>

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