Laravel单页表单重复提交419错误：XSRF-TOKEN不更新问题修复

问题根源 #

首次提交表单触发验证错误时，Laravel会自动更新laravel_session和XSRF-TOKEN（会话固定防护机制），但前端未同步最新Token，导致二次提交使用旧Token触发419状态码。后续手动添加的Token刷新逻辑存在异步时序问题：点击按钮后同时发起Token刷新和表单提交请求，刷新请求未完成时表单仍用旧Token，且两次请求导致session两次更新，加剧Token不匹配。

解决方案 #

1. 利用Laravel响应头自动同步Token #

Laravel在每次响应（包括验证失败的响应）中会通过X-CSRF-TOKEN响应头返回最新Token，直接从这里获取并更新前端即可，无需额外编写刷新Token的路由。

2. 修正前端AJAX逻辑 #

在AJAX请求的complete回调中（无论成功或失败），更新页面中的CSRF Token（meta标签和表单隐藏字段），确保下一次提交使用最新Token。

3. 简化表单事件绑定 #

页面加载时仅绑定一次表单提交事件，避免重复绑定导致的异常触发。

修正后的完整JS代码 #

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
    // 初始绑定一次表单提交事件
    $('#registerForm').on('submit', function(event) {
        event.preventDefault();

        const $form = $(this);
        $.ajax({
            url: $form.attr('action'),
            method: 'POST',
            data: $form.serialize(),
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function(response) {
                if (response.status === 'success') {
                    alert(response.message);
                    // 注册成功后可添加跳转或页面更新逻辑
                    // window.location.href = '/dashboard';
                } else {
                    alert(response.message);
                }
            },
            error: function(xhr) {
                if (xhr.status === 422) {
                    // 处理表单验证错误，可将错误提示渲染到对应字段
                    const errors = xhr.responseJSON.errors;
                    // 示例：遍历错误并显示
                    // $.each(errors, function(field, messages) {
                    //     $(`[name="${field}"]`).after('<span class="error">' + messages[0] + '</span>');
                    // });
                } else {
                    alert('请求失败，请稍后重试');
                }
            },
            complete: function(xhr) {
                // 从响应头获取最新Token并更新
                const newCsrfToken = xhr.getResponseHeader('X-CSRF-TOKEN');
                if (newCsrfToken) {
                    $('meta[name="csrf-token"]').attr('content', newCsrfToken);
                    $form.find('input[name="_token"]').val(newCsrfToken);
                }
            }
        });
    });
});
</script>

后端注意事项 #

• 确保注册路由在web中间件组下，web中间件负责CSRF验证和session管理。
• 生产环境禁止禁用CSRF验证，这是核心安全防护机制。
• 若使用自定义session驱动，确认配置正确，避免session异常更新。

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