Laravel发送Ajax请求表单验证触发422 Unprocessable Entity错误如何解决

核心问题排查 #

• 路由地址不匹配：路由配置中POST接口路径为/mettre-a-jour/recette，前端Ajax请求的URL写为/recette/mettre-a-jour/recette，多了/recette前缀，若你未配置路由组前缀，会先出现404错误，配置了前缀可跳过该问题。
• 422状态码是 Laravel 验证失败的正常返回：HTTP 协议中422就代表请求参数语义错误，Laravel 验证不通过默认返回该状态码，属于预期行为，只需在错误回调中处理错误信息即可。
• 拼写错误：
  1. 前端csrf变量名误写为crsf，当前逻辑不影响但建议修正
  2. 控制器成功返回的字段为succes（缺字母s），和前端成功回调中读取的response.success不匹配，会导致成功时拿不到对应值。

修复方案 #

1. 修正请求地址 #

两种方案二选一即可：

• 直接修改Ajax的url参数为和路由一致的路径：url: "/mettre-a-jour/recette"
• 用Laravel路由名动态生成地址，避免硬编码出错：url: "{{ route('recette.updateRecette') }}"

2. 补充验证错误处理逻辑 #

修改Ajax的error回调，解析返回的验证错误信息，示例代码：

error: function(response, status) {
    console.log('验证失败');
    // 取出所有验证错误信息
    const errors = response.responseJSON.errors;
    // 示例：打印nomRecette字段的错误
    if(errors.nomRecette) {
        console.log('名称错误：', errors.nomRecette[0]);
        // 这里可以把错误提示渲染到页面上
    }
}

3. 修正拼写问题 #

前端把csrf变量名修正为正确拼写：

let csrf = $('input[name=_token]').val();

控制器成功返回的字段修正为一致的命名：

return response()->json(['success'=> 'sucessss']);

额外排查提示 #

如果修正后输入了内容还是返回422，可以在控制器验证逻辑前先打印dd($req->all())查看提交的参数是否符合预期，排查是否有参数丢失、中间件拦截的问题。

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