Google隐形reCaptcha首次验证正常，后续操作报跨域消息发送错误

我来帮你搞定这个跨域报错的问题！这个postMessage错误的核心原因是你每次点击投票按钮时都重复渲染了新的隐形reCaptcha实例，而Google reCaptcha在多实例共存时，会出现跨域通信的冲突——残留的旧实例会尝试和Google域名通信，但页面origin不匹配，最终抛出错误。

问题根源拆解 #

你的代码里，每次调用buttonPress都会：

1. 创建新的<div>容器
2. 调用grecaptcha.render生成新的reCaptcha实例
3. 移除容器但没有销毁旧实例

这种重复初始化会导致多个reCaptcha实例在后台同时运行，它们之间的跨域通信会因为origin不匹配触发报错，而且每个实例的token只能用一次，重复渲染也会浪费资源。

修复方案：复用单一reCaptcha实例 #

我们只需要在页面加载时初始化一次隐形reCaptcha，后续投票时直接复用这个实例，避免重复渲染。

步骤1：页面加载时初始化唯一的reCaptcha实例

把reCaptcha的初始化逻辑移到页面就绪事件中，只执行一次：

// 全局变量存储reCaptcha实例ID，方便后续调用
let recaptchaInstanceId;

$(document).ready(function() {
    // 创建一个隐藏的固定容器（隐形reCaptcha不需要显示容器）
    $('body').append('<div id="fixed-recaptcha-container" style="display: none;"></div>');

    // 渲染并保存实例ID
    recaptchaInstanceId = grecaptcha.render('fixed-recaptcha-container', {
        sitekey: 'SITE_KEY_HERE',
        size: 'invisible',
        callback: function(token) {
            // 验证成功后，使用预存的投票参数执行逻辑
            if (window.currentVoteParams) {
                const { typeVote, thing } = window.currentVoteParams;
                console.log(`TOKEN: ${token} | THING: ${thing} | Vote: ${typeVote}`);
                
                // 这里替换成你的AJAX投票请求
                // $.post('/your-vote-api', {
                //     token: token,
                //     thing: thing,
                //     typeVote: typeVote
                // }, function(response) {
                //     // 处理投票结果
                // });

                // 重置投票参数和reCaptcha，准备下一次投票
                window.currentVoteParams = null;
                grecaptcha.reset(recaptchaInstanceId);
            }
        },
        // 处理token过期的情况
        expired_callback: function() {
            grecaptcha.reset(recaptchaInstanceId);
        }
    });

    // 把reCaptcha徽章移到body末尾，避免被页面内容遮挡
    $('body').append($('.grecaptcha-badge'));
});

步骤2：修改buttonPress函数，复用已有实例

去掉重复渲染的逻辑，直接触发已有实例的验证：

function buttonPress(typeVote, value, e, thing) {
    // 临时存储当前投票的参数，供reCaptcha回调使用
    window.currentVoteParams = {
        typeVote: typeVote,
        thing: thing,
        value: value
    };

    // 触发reCaptcha验证流程
    grecaptcha.execute(recaptchaInstanceId);
}

关键优化点说明 #

1. 单一实例复用：避免重复渲染导致的多实例冲突，彻底解决跨域postMessage报错
2. 实例ID管理：保存grecaptcha.render返回的实例ID，后续的execute和reset都针对同一个实例
3. 参数临时存储：通过全局变量传递投票参数（因为reCaptcha回调是异步的）
4. 自动重置机制：验证完成或token过期时自动重置实例，确保下次投票能生成有效token
5. 合规性保障：保留reCaptcha徽章（除非你已向Google申请隐藏），符合reCaptcha使用条款

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