如何在Laravel11+Inertia.js/Vue3应用中返回并获取错误信息

要在Vue3的onError回调中获取控制器返回的自定义错误，需要调整两个核心部分：控制器的错误响应状态码，以及前端的错误捕获逻辑。

1. 修改Laravel控制器代码 #

当前控制器返回的是200状态码的JSON，Inertia会判定这是成功响应，不会触发onError。必须给错误响应加上非2xx的状态码（推荐用422，代表请求格式合法但业务逻辑不允许）：

public function addInfo(Request $request){
    $validatedData = $request->validate([
        'title' => 'required|string|max:25',
        'message' => 'required|string',
        'days' => 'required|integer|min:1',
    ]);
    
    $count= Information::all()->count();
    if($count >= 5){
        $error = [
            'message'=> '最多允许添加5条信息，请先删除旧的再添加',
            'status' => false,
        ];

        // 关键：返回422状态码，触发Inertia的onError回调
        return response()->json($error, 422); 
    }

    $new_info = new Information();
    $new_info->title    = $request->title;
    $new_info->content  = $request->message;
    $new_info->days     = $request->days;
    $new_info->links    = json_encode($request->links);
    $new_info->save();
}

2. 修改Vue3的错误捕获逻辑 #

Inertia的onError回调接收两个参数：errors（Laravel验证错误的键值对）和response（原始HTTP响应对象）。我们可以通过response.data直接拿到控制器返回的自定义错误信息：

const form = useForm({
   title: '',
   message: '',
   days: '',
   links:[],
});

form.post(route('info.add'), {
    preserveScroll: true,
    onSuccess: () =>{ 
        form.reset();
        lastInput.forEach(lastInput => {
            lastInput.remove();
        });
        showAlert('success', '信息添加成功');
    },
    onError: (errors, response) => {
        // 提取错误信息，同时做兜底处理
        const errorMessage = response.data?.message || '添加失败，请稍后重试';
        showAlert('error', errorMessage);
    }
});

可选：贴合Laravel标准错误格式的写法 #

如果想和Laravel默认的验证错误格式保持一致，可以调整控制器的错误返回结构，这样能直接通过form.errors获取错误：

控制器修改： #

if($count >= 5){
    // 采用Laravel标准的errors结构
    return response()->json([
        'errors' => [
            'global' => ['最多允许添加5条信息，请先删除旧的再添加']
        ]
    ], 422);
}

前端修改： #

onError: () => {
    const errorMessage = form.errors.global?.[0] || '添加失败';
    showAlert('error', errorMessage);
}

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