Google登录按钮本地正常，部署服务器后报google未定义错误求助

问题原因 #

从报错栈中的rocket-loader.min.js可以判断，你的远程服务器启用了Cloudflare的Rocket Loader功能。该功能会异步加载并延迟执行页面脚本，导致你的window.onload回调在Google GSI客户端脚本完成加载前就已执行，此时google对象尚未定义，因此抛出引用错误。

本地环境无此类优化工具，脚本加载顺序正常，所以不会触发该问题。

修复方法 #

方法1：禁用Cloudflare Rocket Loader #

进入Cloudflare控制台，找到对应域名：

• 进入Speed > Optimization页面
• 找到Rocket Loader选项，切换为关闭状态
• 保存设置后等待缓存生效，重新测试功能

方法2：绑定脚本加载完成事件执行初始化逻辑 #

移除对window.onload的依赖，直接给Google脚本添加onload事件监听，确保脚本加载完成后再调用Google API：

<!-- Google Sign In Button -->
<script src="https://accounts.google.com/gsi/client" async defer onload="initGoogleSignIn()"></script>

<script>
function initGoogleSignIn() {
    google.accounts.id.initialize({
        client_id: "id_here",
        callback: handleCredentialResponse
    });
    google.accounts.id.renderButton(
        document.getElementById("googleButtonDiv"),
        { theme: "outline", size: "large", width: 400 }
    );
    google.accounts.id.prompt();
}
</script>

方法3：添加Cloudflare忽略标记保留脚本加载顺序 #

若不想关闭Rocket Loader，可在Google脚本标签中添加data-cfasync="false"属性，让Cloudflare不对该脚本做异步处理：

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

脚本会按正常顺序加载，window.onload回调执行时google对象已存在。

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