Laravel Question posted in
The official Laravel Documentation can be found here.

Laravel – axios request is not giving response or errors

i am using vue js with vee validate on frontend and laravel 10 on backend and i trying to hit my register api , i want to show the validation errors that are returned from the backend api , the response was in this format

{
    "status": "failed",
    "message": "Validation Error!",
    "errors": {
        "name": [
            "The name field is required."
        ],
        "user_name": [
            "The user name field is required."
        ],
        "email": [
            "The email has already been taken."
        ],
        "password": [
            "The password field must be at least 8 characters."
        ]
    }
}

i have tried multiple solutions from the internet but fail to understand why it is behaving like this

const onSubmit = handleSubmit(async (values) => {
     await axios.post("/register",{
        username: values.username,
        email: values.email,
        password: values.password
      })
.then(res=>{
    console.log(res);
})
.catch(err=>{
    console.log(err);
});

//       
});

i have also tried with try catch but it always return response as undefined and whenever i hit the api and it returns error , it does not enter the catch block

this is my backend code

 $validate = Validator::make($request->all(), [
            'name' => 'required|string|max:250',
            'user_name' => 'required|string|max:50|unique:users,user_name',
            'email' => 'required|string|email:rfc,dns|max:250|unique:users,email',
            'password' => 'required|string|min:8'
        ]);

        if($validate->fails()){
            $response = [
                'status' => 'failed',
                'message' => 'Validation Error!',
                'errors' => $validate->errors(),
            ];
            return response()->json($response, 403);
            //throw new IlluminateValidationValidationException($validate);
        }

any help will be appreciated

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    saw many posts and threads related to this issue , some said it was due to the CORS issue , others gave their own answers ,

    however i was able to solve this one adding a

     var instance = axios.create({
        validateStatus: function (status) {
            return status == 201;
        }
    });

    then did the request in this way ,

      instance.post('/register', values)
    .then( 
   (response) => { 
    console.log(response);
        Swal.fire({
          icon: 'success',
          title: 'Success!',
          text: 'Registeration Completed Successfully',
        });
        modalClose();
      
   },
   (error) => {
      console.log(error);
      actions.setErrors(error.response.data.error);
    }

    this way i was able to get the error in my error block and the 201 as response

    the detail thread was found on: https://github.com/axios/axios/issues/960


  2. 0

    like the provided link from Jorge, you can try one of those answers there. But on my end, the main answer that resolves mine was by adding

    console.log(error.response)

    to my catch block hence

    .catch(error=>{
console.log(error.response)
});

    Let me know if that works for you. Thanks

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search