无法自定义表单错误，因为服务器在没有返回错误的情况下返回 422 Unprocessable Entity

Question

我正在使用 Laravel 和 VueJS，对于我所有的 post 和 put 方法服务器 returns 提交表单后新创建的数据，在如果出现错误，我无法从 browser console 访问它们。这是我在 newtwork tab 中看到的内容。目的是根据服务器返回的错误自定义表单错误

这是我的后端代码：

private function validateForm($data){
    return Validator::make($data,
    [
        'fname' => ['required', 'string','min:2' ,'max:255'],
        'lname' => ['required', 'string','min:2' ,'max:255'],
        // 'mname' => ['string','min:2' ,'max:255'],
        'company' => ['string','min:2' ,'max:255'],
        'title' => ['string','min:2' ,'max:255'],
        'phone_number' => ['string','min:13' ,'max:13'],
        'city' => ['required', 'string','min:2' ,'max:100'],
        'email' => ['required', 'string', 'email', 'max:255', 'unique:users'],
        'password' => ['required', 'string', 'min:8', 'confirmed']
        // 'password_confirm'=>['required','string']
    ]
  )->validate();
}
//Register
public function register(Request $request){
    $data=$this->validateForm($request->all());
    $data['password']=Hash::make($data['password']);
    $user=new User($data);
    $user->save();
    return response()->json($user);

}

我的前端代码：

export default{
    data(){
        return {
            form:{
                email:'',
                password:'',
                password_confirmation:'',
                fname:'',
                lname:'',
                city:''
            },
            formError:''
        }
    },
    methods:{
        //This should be a POST method through axios
        register:async function(){
           try{
               const res=await axios.post('api/register',
               {
                   email:this.form.email,
                   password:this.form.password,
                   password_confirmation:this.form.password_confirmation,
                   fname:this.form.fname,
                   lname:this.form.lname,
                   city:this.form.city
               });
               //Une fois inscrit,il est redirige vers la page de login
               this.$router.push({path:'/login'});
               console.log("My data : ",res.data);
           }catch(err){
                   console.log("Errors",err);
           }

        }
    }
    }

当没有错误时，一切正常，但当有错误时，这就是我在 browser console tab:

中得到的

并且在 Devtools network tab

我试过 link Issues with Axios catch method 来自 Laracast

还有其他一些解决方案，但都没有解决我的问题。在使用 async-await pattern 之前我使用了 axios.post('url',data).then(res=>...).catch(err=>...)

当我使用 postman 时，http status 仍然是 422 但 error object 被返回，所以 postman 一切正常但在 browser

我该如何解决这个问题？

Answer 1

Laravel returns HTTP 422 - Unprocessable Entity 当您设置的验证失败时。对于您的情况，我会仔细查看您发布到服务器的数据，并手动检查它是否通过了您编写的验证案例。

要获取导致错误的确切字段，您需要在代码中进行处理，例如：

$validator = Validator::make($data, $rules);

if ($validator->fails()) {

  // 500 is the HTTP Status Code you want to return.   
  // This should also throw you in the catch branch of your front-end code
  return response()->json(['errors'=>$validator->errors()], 500);

}

在您的代码中，应检查 register 函数中的 $data 变量是否未通过验证，并且 return 错误

Answer 2

这是因为 err 将 return 直接访问 toString() 方法，但具有以下属性：

err.response.data 会有你想要的。

Answer 3

当axios抛出错误时，HTTP响应可以在error.response中找到。验证错误将出现在 errors 键中，因此您可以像这样访问验证错误：

axios.post(someUrl, someData)
    .then(response => {
        // Successful response
    })
    .catch(error => {
        let errors = error.response.data.errors;
    });

Answer 4

当出现 HTTP 错误时（例如响应代码在 400 和 599 之间）axios returns axios 错误响应，并且在 repository documentation 错误处理下它表示您可以访问实际响应使用 error.response.data。例如：

 try {
       const res=await axios.post('api/register',
       {
           email:this.form.email,
           password:this.form.password,
           password_confirmation:this.form.password_confirmation,
           fname:this.form.fname,
           lname:this.form.lname,
           city:this.form.city
       });
       //Une fois inscrit,il est redirige vers la page de login
       this.$router.push({path:'/login'});
       console.log("My data : ",res.data);
   }catch(err){
       if (err.response && err.response.status === 422) {
           if (err.response.data.errors.fname) {
              console.log('First name errors: '+ err.response.data.errors.fname.join(','));
           } 

           // and so on

       }
   }

无法自定义表单错误，因为服务器在没有返回错误的情况下返回 422 Unprocessable Entity

Unable to customize form errors because server is returning 422 Unprocessable Entity without returning errors

javascript

laravel

vue.js

axios

http-status-code-422