重载脚本时reCAPTCHA api.js触发RequireJS scripterror报错如何解决

• 优先排查网络连通性：reCAPTCHA服务在中国大陆网络环境下默认无法访问，是触发该类脚本加载错误的最高频原因。可直接在浏览器地址栏输入报错中的reCAPTCHA脚本地址测试，确认是否能正常返回脚本内容。
• 检查内容安全策略（CSP）配置：确认页面CSP规则没有拦截*.google.com、*.gstatic.com域下的脚本资源，没有限制第三方脚本的执行权限。
• 核查RequireJS加载配置：确认paths、shim配置是否正确声明reCAPTCHA依赖，是否存在脚本未加载完成就提前调用grecaptcha相关方法的情况；检查全局recaptchaOnload回调是否在脚本加载前被意外覆盖或销毁。
• 针对性排查脚本重载场景：确认重载操作时是否重复插入了同地址的reCAPTCHA脚本标签，是否存在重复加载导致的回调冲突、实例重复初始化问题；检查脚本地址的协议解析是否正常，报错中使用了协议相对路径//开头的地址，如果本地调试用file://协议直接打开页面，会出现协议解析失败导致脚本无法加载。

• 网络问题适配：如果服务面向中国大陆用户，建议直接替换为国内可正常访问的验证码服务；如果是内部/海外场景，确认网络链路可正常连通谷歌服务即可。
• CSP规则调整：在页面CSP的script-src配置项中添加reCAPTCHA相关域名白名单，允许对应域的脚本加载执行。
• 修正RequireJS加载配置，参考标准写法：

// 提前声明全局加载完成回调
window.recaptchaOnload = function () {
  // 编写验证码加载完成后的初始化逻辑
}
require.config({
  paths: {
    recaptcha: 'https://www.google.com/recaptcha/api.js?onload=recaptchaOnload&render=explicit'
  },
  shim: {
    recaptcha: {
      exports: 'grecaptcha'
    }
  }
})

• 优化脚本重载逻辑：重载前先移除页面上已存在的reCAPTCHA脚本标签，清空全局已挂载的grecaptcha实例和旧的recaptchaOnload回调，避免重复加载冲突；本地调试时启动本地HTTP/HTTPS服务访问页面，不要直接用file://协议打开本地文件。

内容的提问来源于stack exchange，提问作者Hassan Ali Shahzad