本地JavaScript应用集成hCaptcha遇跨域及无Host错误，求解决方案

问题背景 #

你正在开发一个通过AJAX与服务器交互的本地JavaScript应用，为注册表单添加hCaptcha验证时遇到以下问题：

使用的代码 #

<script src='https://js.hcaptcha.com/1/api.js' async defer></script>   
<h2>Create an account</h2>
<form class="create-account"  method="post">
    ...
    <div class="h-captcha" data-sitekey="..."></div>
    <p><button type="submit">Create account</button></p>
</form>

出现的错误 #

运行时抛出JavaScript错误：

TypeError: ke.data.kernel.save.user_init is not a function
SecurityError: Permission denied to access property "document" on cross-origin object

同时发起的请求：

curl 'https://hcaptcha.com/checksiteconfig?v=..&host=&sitekey=...&sc=1&swa=1' 

返回403 Invalid Data错误，原因是本地应用无有效Host，hCaptcha验证请求的域名不在允许列表中。

可行解决方案 #

1. 配置本地Host并添加到hCaptcha允许域名 #

• 修改本地hosts文件（Windows：C:\Windows\System32\drivers\etc\hosts；Linux/macOS：/etc/hosts），添加一行映射：

  127.0.0.1 local.your-app.com
  

• 启动本地web服务器（比如Node.js的http-server、Python的python -m http.server），通过http://local.your-app.com访问应用。
• 登录hCaptcha后台，找到对应站点密钥的设置页面，将local.your-app.com添加到允许的域名列表中。

2. 使用hCaptcha测试模式 #

测试模式可绕过域名验证限制，仅用于开发阶段：

• 方法一：在hCaptcha容器添加data-test属性：

  <div class="h-captcha" data-sitekey="..." data-test="true"></div>
  

• 方法二：加载api.js时添加test=1参数：

  <script src='https://js.hcaptcha.com/1/api.js?test=1' async defer></script>
  

注意：测试模式下的验证响应仅用于开发调试，不能用于生产环境的真实验证。

3. 使用localhost作为Host #

• 启动本地web服务器，通过http://localhost:端口号或http://127.0.0.1:端口号访问应用。
• 登录hCaptcha后台，将localhost和127.0.0.1添加到对应站点密钥的允许的域名列表中。

关键原因说明 #

hCaptcha的checksiteconfig接口会验证请求来源的Host是否属于站点密钥绑定的允许域名范围。如果直接通过file://协议打开本地HTML文件，请求中没有合法的Host字段，就会触发403错误，进而导致后续的JavaScript执行异常。

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