Laravel 9+Ajax请求422错误控制台仍显示，如何屏蔽？

我使用Ajax和Laravel 9发起请求校验字段输入，Laravel会返回422字段错误。虽然能在Ajax的error函数中处理该错误，但它仍会显示在控制台，请问如何让这个错误不再出现在控制台？

Laravel 后端代码 #

public static function changeUsername(Request $request){

    $request->validate([
        'username' => 'required|string|max:255|unique:users',
    ], [
        'username.required' => 'O username não pode estar vazio',
        'username.string' => 'O username não pode conter apenas números',
        'username.max' => 'O username não pode ter mais de 255 caracteres',
        'username.unique' => 'O username já está em uso',
    ]);
    
    $user = User::find(Auth::user()->id);
    $user->username = $request->username;
    $user->save();
    
    return response()->json([
        'message' => 'Username alterado com sucesso!',
        'user' => $user
    ], 200);
}

Ajax 前端代码 #

function saveUsername(username) {
    $.ajax({
        type: "POST",
        url: "{{ route('user.updateUsername') }}",
        data: {
            username: username,
            _token: "{{ csrf_token() }}"
        },
        success: function(response) {
            $('#username').children().text(username);
            showToast("Sucesso", "Username Alterado com Sucesso");
            $('.usrChangeBtn[function="load"]').hide();
            $('.usrChangeBtn[function="edit"]').show();
        },
        error: function(response) {
            showToast("Erro", response.responseJSON.message);
            $('.usrChangeBtn[function="load"]').hide();
            $('.usrChangeBtn[function="edit"]').show();
        },
        beforeSend: function() {
            $('.changeUsername').hide();
            $('#username').show();
            $('.usrChangeBtn[function="load"]').show();
        }
    });
}

解决方法 #

控制台显示422错误是因为jQuery默认会将HTTP错误（4xx、5xx级别的状态码）输出到控制台。要阻止特定错误的控制台输出，推荐用以下精准方式：

针对422状态码单独处理 #

通过statusCode回调专门处理422验证错误，同时保留其他错误的控制台输出（比如500服务器错误，方便排查问题）：

function saveUsername(username) {
    $.ajax({
        type: "POST",
        url: "{{ route('user.updateUsername') }}",
        data: {
            username: username,
            _token: "{{ csrf_token() }}"
        },
        success: function(response) {
            $('#username').children().text(username);
            showToast("Sucesso", "Username Alterado com Sucesso");
            $('.usrChangeBtn[function="load"]').hide();
            $('.usrChangeBtn[function="edit"]').show();
        },
        // 专门处理422状态码的错误
        statusCode: {
            422: function(response) {
                showToast("Erro", response.responseJSON.message);
                $('.usrChangeBtn[function="load"]').hide();
                $('.usrChangeBtn[function="edit"]').show();
            }
        },
        // 处理其他非422的错误
        error: function(response) {
            if (response.status !== 422) {
                console.error('请求出错:', response);
                showToast("Erro", "服务器内部错误");
            }
            $('.usrChangeBtn[function="load"]').hide();
            $('.usrChangeBtn[function="edit"]').show();
        },
        beforeSend: function() {
            $('.changeUsername').hide();
            $('#username').show();
            $('.usrChangeBtn[function="load"]').show();
        }
    });
}

全局禁用所有Ajax错误的控制台输出（不推荐） #

如果希望所有Ajax请求的错误都不显示在控制台，可以在项目初始化时添加以下代码，但这会导致排查其他类型的Ajax错误变得困难，谨慎使用：

$.ajaxSetup({
    error: function() {
        // 仅处理自定义逻辑，不触发默认的控制台输出
    }
});

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