Next.js+React18集成Google reCaptcha v3遇域名不支持错误求助

问题根源 #

这个错误和next.config.js的配置无关——reCaptcha的域名白名单是在Google官方后台管理的，不是项目配置文件能控制的。

修复步骤 #

• 登录Google reCaptcha管理后台
• 找到你当前使用的Site Key对应的项目
• 在**域名（Domains）**设置项中，添加以下条目：
  • localhost
  • 127.0.0.1（覆盖本地开发可能用到的IP访问场景）
  • 不需要添加端口号（比如localhost:3000），reCaptcha仅校验域名/IP，端口不影响校验
• 保存配置后，等待5-10分钟让配置生效（Google的配置同步存在延迟）
• 重启本地Next.js开发服务，重新测试表单验证流程

额外排查点 #

• 确认代码中使用的Site Key和后台配置的完全一致，避免混淆测试密钥与正式密钥
• 若使用reCaptcha官方测试密钥（6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI），该密钥默认支持localhost，无需额外配置；如果是自行创建的密钥，必须手动添加域名
• 本地开发的协议（http/https）不影响校验，两种协议下的localhost都会被识别

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