reCaptcha v3中g-recaptcha-response值为空的问题排查

针对你遇到的「能获取到token但无法写入隐藏输入框，本地正常线上失效」的问题，按以下步骤排查：

1. 确认输入框元素是否存在且ID匹配 #

线上环境可能因模板渲染导致ID变更，先在浏览器控制台执行：

document.getElementById('g-recaptcha-response')

• 如果返回null：检查HTML中隐藏输入框的ID是否准确，注意getElementById区分大小写，是否存在框架自动添加的前缀/后缀。
• 如果能返回元素：在赋值代码中添加日志，确认赋值过程是否正常：

grecaptcha.execute('Site-Key').then((token) => {
  const inputEl = document.getElementById("g-recaptcha-response");
  console.log('输入框元素:', inputEl);
  console.log('获取到的token:', token);
  inputEl.value = token;
  console.log('赋值后的值:', inputEl.value);
});

查看控制台日志，确认赋值后输入框的value是否真的为空。

2. 排查表单提交时机问题 #

如果点击提交按钮后立即触发表单提交，可能存在异步赋值未完成就提交的情况：

• 错误示例：按钮同时触发onClick()和表单提交

<button onclick="onClick(); document.getElementById('form').submit()">提交</button>

• 修正方案：将表单提交逻辑放到token赋值的回调中，确保赋值完成后再提交：

function onClick() {
  grecaptcha.ready(function() {
    grecaptcha.execute('Site-Key').then((token) => {
      document.getElementById("g-recaptcha-response").value = token;
      // 赋值完成后提交表单
      document.getElementById('your-form-id').submit();
    });
  });
}

按钮仅调用onClick()即可：

<button onclick="onClick()">提交</button>

3. 检查内容安全策略(CSP)限制 #

正式网站通常会开启CSP，可能限制DOM元素的修改操作。查看浏览器控制台是否有类似以下的报错：

Refused to set property 'value' on 'HTMLInputElement': This document's Content Security Policy disallows setting the 'value' property on this element.

如果存在此类报错，需要调整CSP规则，允许对该输入框的value赋值，或临时放宽CSP（如添加unsafe-inline）进行测试。

4. 检查输入框属性与其他干扰代码 #

• 确保隐藏输入框没有disabled属性（disabled元素的值不会被表单提交携带），且存在name="g-recaptcha-response"属性：

<input type="hidden" id="g-recaptcha-response" name="g-recaptcha-response">

• 排查是否有其他JS代码在表单提交前清空输入框：给表单添加submit事件监听，打印提交时的token值：

document.getElementById('your-form-id').addEventListener('submit', function(e) {
  console.log('提交时的token值:', document.getElementById('g-recaptcha-response').value);
  // 如需调试可临时阻止提交：e.preventDefault();
});

5. 调整定时刷新代码的执行时机 #

定时刷新的代码建议放到grecaptcha.ready回调中，确保reCaptcha初始化完成后再执行：

grecaptcha.ready(function() {
  const refreshCaptcha = () => {
    grecaptcha.execute('Site-Key').then((token) => {
      document.getElementById('g-recaptcha-response').value = token;
    });
  };
  // 首次执行
  refreshCaptcha();
  // 定时刷新（110秒）
  setInterval(refreshCaptcha, 110000);
});

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