Google reCaptcha在Bootstrap模态弹窗中失效问题求助

嘿，这个问题我之前碰过好多次，其实就是Google reCaptcha的域名验证逻辑在动态模态框场景下的小细节没处理好，咱们一步步来排查解决：

这是最常见的触发原因，你得先确认站点密钥对应的域名白名单是否正确：

• 登录Google reCaptcha管理后台，找到你正在使用的密钥组，检查域名列表：
  • 要确保当前访问网站的域名（比如yourdomain.com或www.yourdomain.com）已经准确添加，注意不要带http://、https://或者路径，只写纯域名即可。
  • 如果是本地开发测试，别忘了把localhost或者127.0.0.1也加进去，不然本地环境会直接触发域名错误。
  • 如果用了子域名（比如app.yourdomain.com），要么单独添加该子域名，要么用通配符*.yourdomain.com（通配符只能覆盖同一主域名下的子域名，不能用*.com这种宽泛写法）。

Bootstrap模态框是动态渲染的，直接用静态的class="g-recaptcha"可能会因为DOM加载时机问题导致验证异常，建议改用动态初始化的方式：

1. 确保整个页面只引入一次reCaptcha脚本，不要在首页和模态框里重复引入：

   <script src="https://www.google.com/recaptcha/api.js" async defer></script>
   

2. 在模态框的内容区域放一个空的容器：

   <div id="modal-recaptcha-container"></div>
   

3. 监听模态框的shown.bs.modal事件，在模态框完全显示后再初始化reCaptcha：

   $('#your-modal-id').on('shown.bs.modal', function() {
     grecaptcha.render('modal-recaptcha-container', {
       sitekey: '你的站点密钥',
       // 可选：添加验证成功后的回调函数等配置
       callback: function(response) {
         console.log('reCaptcha验证成功', response);
       }
     });
   });
   

这种方式能确保reCaptcha在DOM完全就绪后才加载，避免域名验证的异常触发。

• 确认你访问网站的域名和白名单里的完全一致：比如白名单里只加了yourdomain.com，你用www.yourdomain.com访问就会触发错误，反之亦然，两个域名都需要添加到白名单中。
• 如果你的模态框内容是通过AJAX加载的外部页面，要确保这个外部页面的域名和主站域名一致，跨域场景下reCaptcha的域名验证会直接失败。

有时候旧的reCaptcha脚本缓存会导致验证逻辑异常，清一下浏览器缓存（或者用无痕模式测试），再重新加载页面试试。

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