如何在Laravel中结合Recaptcha与AJAX实现联系表单发邮件及排错

解决Laravel + AJAX + Recaptcha v2验证失败问题 #

看起来你遇到了Recaptcha集成后的验证卡壳问题——明明勾选了验证框，却还是收到错误提示。我帮你梳理几个核心排查点和解决方案，都是这类问题的常见坑：

1. 先确认前端是否正确传递了Recaptcha响应值

这是最容易漏掉的步骤：AJAX请求必须把Recaptcha生成的g-recaptcha-response值传给后端，否则后端根本拿不到验证依据。

修正AJAX代码：

$.ajax({
    url: "{{ route('contact.store') }}", // 用路由别名更稳妥
    type: "POST",
    data: {
        name: $("#name").val(),
        email: $("#email").val(),
        message: $("#message").val(),
        // 关键！必须包含这个参数，不能省略
        "g-recaptcha-response": $("#g-recaptcha-response").val(),
        // 别忘了CSRF令牌，Laravel默认要求
        _token: $('meta[name="csrf-token"]').attr('content')
    },
    success: function(response) {
        alert("消息发送成功！");
        // 重置表单等后续逻辑
    },
    error: function(xhr) {
        var errors = xhr.responseJSON.errors;
        if (errors['g-recaptcha-response']) {
            alert(errors['g-recaptcha-response'][0]);
        }
    }
});

同时检查Recaptcha的前端渲染是否正确：

<!-- 在页面底部加载Recaptcha脚本 -->
<script src="https://www.google.com/recaptcha/api.js" async defer></script>

<!-- 表单中的Recaptcha容器，确保sitekey从Laravel配置读取，不要硬编码 -->
<div class="g-recaptcha" data-sitekey="{{ config('services.recaptcha.sitekey') }}"></div>

2. 后端验证规则与配置要匹配

接下来确认Laravel后端的验证逻辑和Recaptcha配置是否正确：

修正ContactController的验证规则：

use Illuminate\Http\Request;

class ContactController extends Controller
{
    public function store(Request $request)
    {
        // 可以先临时调试，确认是否收到前端传的g-recaptcha-response
        // dd($request->all());

        $validatedData = $request->validate([
            'name' => 'required|string|max:255',
            'email' => 'required|email',
            'message' => 'required|string',
            // 必须包含两个规则：required确保值存在，recaptcha调用验证器验证
            'g-recaptcha-response' => 'required|recaptcha',
        ]);

        // 这里处理邮件发送等业务逻辑
        // Mail::to('your@example.com')->send(new ContactMail($validatedData));

        return response()->json(['success' => '消息已成功发送！']);
    }
}

确认Recaptcha配置：
如果你用的是Laravel常用的anhskohbo/no-captcha包，确保.env和配置文件正确：

// .env 文件中添加你的Recaptcha密钥（从Google Recaptcha控制台获取）
RECAPTCHA_SITEKEY=你的公钥
RECAPTCHA_SECRET=你的私钥

// config/services.php 中添加配置
'recaptcha' => [
    'sitekey' => env('RECAPTCHA_SITEKEY'),
    'secret' => env('RECAPTCHA_SECRET'),
],

3. 常见坑点排查

• CSRF令牌缺失：AJAX请求必须携带CSRF令牌，要么通过_token参数，要么设置请求头X-CSRF-TOKEN。
• 密钥不匹配/域名受限：检查Google Recaptcha控制台中，你的站点密钥和私钥是否正确，且允许的域名包含当前开发/生产域名。
• 版本混淆：确保前后端用的是同一版本的Recaptcha——你用的是v2勾选框，就不要用v3的验证逻辑。

如果还是有问题，可以手动测试Recaptcha响应值：把前端传的g-recaptcha-response值，带到Google的验证接口测试：

POST https://www.google.com/recaptcha/api/siteverify
参数：
secret=你的私钥
response=前端传递的g-recaptcha-response值
remoteip=用户IP

如果Google返回success: false，说明密钥或响应值有问题；如果返回success: true，那就是Laravel验证器的配置问题。

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