Laravel+Ajax开发CRUD提交数据时出现419(unknown status)错误求助

问题背景 #

使用Laravel结合Ajax开发CRUD应用时，添加数据触发POST请求出现419(unknown status)错误，已在页面head中添加CSRF令牌元标签，相关代码如下：

CSRF令牌配置

<meta name="csrf-token" content="{{ csrf_token() }}">

原Ajax与jQuery代码

function addProject() {

if $("#frmProject").valid())
{
    var _url = '';
    var _data = '';
    var _method;
    
    if (isNew == true) {
        _url = '{{ route('store') }}';
        _data = $('#frmProject').serialize();
        _method = 'POST';
       

    }


    $.ajax({

            headers: {
    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
             },
        type: _method,
        url: _url,
        dataType: 'JSON',
        data: _data,
        cache : false,
        contentType:false,
        processData:false,

原表单代码

<form class="card" id="frmProject">
               
    <div class="form-group" align="left">
        <label class="form-label">Category Name</label>
        <input type="text" class="form-control" placeholder="Category Name" id="categoryname" name="categoryname" size="30px"  required>

    </div>
    <div class="form-group" align="left">
        <label class="col-sm-2 control-label">Status</label>


        <select class="form-control" id="status" name="status"
                placeholder="Project Status" required>
            <option value="">Please Select</option>
            <option value="1">Active</option>

            <option value="2">DeActive</option>
        </select>
    </div>


    <div class="card" align="right">

        <button type="button" id="save" class="btn btn-info" onclick="addProject()">Add
        </button>
        <button type="button" id="clear" class="btn btn-warning" onclick="reSet()">Reset</button>
    </div>
</form>

路由配置

Route::post('/store', [CategoryController::class, 'store'])->name('store');

控制器代码

public function store(Request $request)
{
    $catData = [
        'categoryname' => $request->categoryname,
        'status' => $request->status,
    ];

    Category::create($catData);

    return response()->json([
        'status' => 200,
    ]);
}

模型代码

class Category extends Model
{
    protected $fillable = [
        'categoryname',
        'status'
    ];
    use HasFactory;
}

错误排查与解决方法 #

1. 修正Ajax核心参数错误

你的Ajax代码中设置了contentType:false和processData:false，这两个参数仅适用于文件上传场景。而你使用$('#frmProject').serialize()将表单序列化为application/x-www-form-urlencoded格式，这两个参数会导致Laravel无法正确解析请求数据，同时干扰CSRF令牌的验证逻辑。

修正方法：删除这两个参数，或者根据场景调整：

$.ajax({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    },
    type: _method,
    url: _url,
    dataType: 'JSON',
    data: _data,
    cache : false,
    // 移除contentType和processData参数
});

2. 修复JavaScript语法错误

原代码中if $("#frmProject").valid())存在语法错误，缺少外层括号，会导致函数执行中断，根本无法触发Ajax请求。

修正方法：

if ($("#frmProject").valid()) {
    // 后续逻辑
}

3. 确保CSRF令牌传递可靠

除了通过请求头传递CSRF令牌，更稳妥的方式是在表单中添加隐藏域，让serialize()自动包含令牌：

<form class="card" id="frmProject">
    <!-- 添加CSRF隐藏域 -->
    <input type="hidden" name="_token" value="{{ csrf_token() }}">
    
    <!-- 原有表单字段 -->
    <div class="form-group" align="left">
        <label class="form-label">Category Name</label>
        <input type="text" class="form-control" placeholder="Category Name" id="categoryname" name="categoryname" size="30px"  required>
    </div>
    <!-- 其他字段... -->
</form>

此时可以移除Ajax请求头中的CSRF配置，简化代码。

4. 排查会话与缓存问题

• 清除浏览器缓存，避免旧的会话数据干扰
• 检查.env文件中的SESSION_DRIVER配置，确保设置为file、database等有效驱动
• 确认服务器上的storage/framework/sessions目录有写入权限

修正后的完整Ajax代码示例 #

function addProject() {
    if ($("#frmProject").valid()) {
        var _url = '';
        var _data = '';
        var _method;
        
        if (isNew == true) {
            _url = '{{ route('store') }}';
            _data = $('#frmProject').serialize();
            _method = 'POST';
        }

        $.ajax({
            type: _method,
            url: _url,
            dataType: 'JSON',
            data: _data,
            cache : false,
            success: function(response) {
                if (response.status === 200) {
                    // 处理成功逻辑，比如刷新列表、重置表单
                    reSet();
                    alert('添加成功');
                }
            },
            error: function(xhr) {
                console.log(xhr.responseText);
            }
        });
    }
}

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