Невозможно настроить ошибки формы, потому что сервер возвращает 422 Unprocessable Entity без возврата ошибок

Question

Я работаю с Laravel и VueJS, и для всех моих методов post и put сервер возвращает вновь созданные данные после отправки формы, в случае ошибок я не могу получить к ним доступ из 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

я пробовал следующую ссылку Проблемы с методом захвата Axios из Laracast

как отображать ошибки в .catch, исходящие от API на веб-интерфейсе

И некоторые другие решения, но все они не решили мою проблему.Перед использованием async-await pattern я использовал axios.post('url',data).then(res=>...).catch(err=>...)

Когда я использую почтальон, http status по-прежнему 422, но возвращается error object, поэтому с postman все идет хорошо, но не в browser

Как я могу решить эту проблему?

Answer 1

Когда есть ошибка HTTP (например, код ответа от 400 до 599), axios возвращает ответ об ошибке axios, а в документации хранилища при обработке ошибок это означает, что вы можете получить доступ к фактическому ответу, используя 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

       }
   }

Answer 2

Это потому, что err вернет метод 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

Laravel возвращает 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);

}

В вашем коде переменная $data из функции register должна быть проверена, если она не проходит проверку и возвращает ошибку