CODEWITHSUNDEEP
laravelvue.jspostaxioshttp-error
Maestro Dever
Maestro Dever

Reputation: 642

Vuejs Axios POST request gets HTTP422 error from Laravel backend

Hi I am using Vuejs in the frontend and Laravel in the backend. The role of Laravel is handling the API only. The frontend and backend are separated, i.e. I am not using Vuejs in Laravel's resource/js folder.

Now I am sending Axios POST request from Vuejs to Laravel. All the form input values are prevalidated using HTML5 required attribute. And when I console.log the request data, it shows all the fields filled.

In Vue file: 

const data = {
   name: this.name,
   gender: this.gender,
   mobile_no: this.mobile_no,
   image: this.userImage
};
console.log("Request data . . . .", data);

const response = await this.axios
   .post(`${this.AppURL}/admin/user/create`, data, {
        headers: {
          "Content-Type": "multipart/form-data"
        }
   })
   .then(() => {
        console.log("Success. . . . ")
           alert("Successfully Driver Added");
        })
   .catch(error => console.log(error));

And in Laravel, the request is passed through some validation. It's a simple validation to check if all the fields are filled. I am also using JWTAuth package for the authentication, and the token is generated by it. It's too much code to write them all the way down here. But I am sure you can understand what I mean.

What I am getting as a response is this

POST http://localhost:8000/api/admin/user/create 422 (Unprocessable Entity)

The actual result I am expected to get is either success or some errors that is according to some if conditions in validation or token check. I tried to figure out where this error might come from. What I think at the moment is this could be due to the absence of csrf_token in the POST request. As I'm sending the request outside Laravel, csrf_token is missing in the form. I am not 100% sure though about this.

So my question is:

  1. How can I include csrf_token in Axios POST request, when I send it from outside Laravel.

  2. If this 422 error is not related with csrf_token, what could be causing this? Any previos experiences like min? and any solutions for this?

Thanks in advance for your help.

Upvotes: 4

Views: 11631

Answers (5)

Ameer Dheyaa
Ameer Dheyaa

Reputation: 71

Just click on the preview tab within network section in the dev tool, you are going to see the actual error message.

Upvotes: 0

Mohammad Rana
Mohammad Rana

Reputation: 47

.catch(function (error) {
     console.log(error.response.data.errors);
});

please use this code I hope it work's.

Upvotes: 2

Gufran Hasan
Gufran Hasan

Reputation: 9373

Please, modified catch block as @Jack suggested:

.catch(error => {
console.log("ERRRR:: ",error.response.data);

});

Now you can get errors and handle errors in the catch block.

Upvotes: 8

ganicvp7
ganicvp7

Reputation: 57

These errors may be caused due to follow reasons, ensure the following steps are followed. To connect the local host with the local virtual machine(host). Here, I'am connecting http://localhost:3001/ to the http://abc.test Steps to be followed:

  1. We have to allow CORS, placing Access-Control-Allow-Origin:* in header of request may not work. Install a google extension which enables a CORS request.
  2. Make sure the credentials you provide in the request are valid.
  3. Make sure the vagrant has been provisioned. Try vagrant up --provision this make the localhost connect to db of the homestead.

Upvotes: 0

Rehman Ahmed Khan
Rehman Ahmed Khan

Reputation: 36

I was also facing the same issue, i think it is due to some Headers missing in your Api request from vue.js. here some tips which may helps you to solve this issues.

  1. Make sure that you are protecting your Api Routes or not(by sanctum or something else). If you are protecting , then make make sure that you are sending authentications token in headers.
  2. Second make sure that your request(axios or jwt) should contained valid data, if your are sending images or files etc make sure how can we send them.
  3. First, get request and check in laravel by dd($erquest->all()); if you are geeting data then validate, it is possible that laravel request doesnt contained your sending data..

Upvotes: 0

Related Questions