React-google-recaptcha-v3移动端无法正常工作问题求助

先修复请求格式问题 #

你的axios POST请求写法存在明显问题：

• 第二个参数传了"undefined"，不符合application/x-www-form-urlencoded的请求体要求，需传递键值对形式的表单数据；
• siteverify接口要求参数通过请求体传递，而非params（params会将参数拼在URL上，不符合Google接口规范）。

修正后的请求代码：

const formData = new URLSearchParams();
formData.append('secret', process.env.RECAPTCHA_SECRET_KEY);
formData.append('response', gReCaptchaToken);

const response = await axios.post("https://www.google.com/recaptcha/api/siteverify", formData, {
  headers: {
    "Content-Type": "application/x-www-form-urlencoded",
  },
});

排查移动端特有的问题 #

• 验证gReCaptchaToken有效性：移动端可能因reCaptcha行为验证（如滑动验证）未完成，导致gReCaptchaToken为空或无效。发送请求前先打印该值，确认是否正常获取，同时确保已正确触发executeRecaptcha验证流程。
• 检查跨域与安全策略：部分移动端浏览器跨域限制更严格，确认你的域名已添加到Google reCaptcha控制台的允许域名列表（包含移动端访问的域名）。另外，绝对不要在前端直接调用siteverify接口——前端暴露RECAPTCHA_SECRET_KEY会导致密钥泄露，这是严重安全问题，移动端浏览器的安全策略也可能因此拦截请求，建议通过后端中转调用该接口。
• 排查网络与缓存：移动端弱网环境可能导致请求失败，可通过浏览器开发者工具（移动端调试模式）查看Network面板，确认请求是否发送、是否有403/500等报错；同时清除移动端浏览器缓存后重新测试。

最佳实践 #

• 禁止在前端代码中暴露RECAPTCHA_SECRET_KEY，必须通过后端服务中转调用siteverify接口；
• 发送请求前先校验gReCaptchaToken是否存在，避免发送无效请求。

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