Vuejs Axios POST 请求从 Laravel 后端获取 HTTP422 错误

Question

嗨，我在前端使用 Vuejs，在后端使用 Laravel。Laravel 的作用只是处理 API。前端和后端是分开的，即我没有在 Laravel 的resource/js文件夹中使用 Vuejs 。

现在我从 Vuejs 向 Laravel 发送 Axios POST 请求。所有表单输入值都使用 HTML5required属性进行了预验证。当我console.log请求数据时，它会显示所有已填写的字段。

在 Vue 文件中：

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));

而在 Laravel 中，请求会通过一些验证。这是一个简单的验证来检查是否所有字段都已填写。我也使用JWTAuth包进行身份验证，令牌是由它生成的。一直写到这里的代码太多了。但我相信你能明白我的意思。

我得到的回应是这个

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

实际的结果，我希望得到的是两种success或一些errors是根据一些if以验证或令牌检查的条件。我试图弄清楚这个错误可能来自哪里。我目前认为这可能是由于csrf_tokenPOST 请求中没有。当我在 Laravel 之外发送请求时，表单中缺少 csrf_token。不过我不是 100% 确定这一点。

所以我的问题是：

1. 当我从 Laravel 外部发送csrf_token请求时，如何将其包含在 Axios POST 请求中。

2. 如果这422 error与 无关csrf_token，可能是什么原因造成的？有没有像min这样的以前的经历？以及对此的任何解决方案？

在此先感谢您的帮助。

Answer 1

请按照@Jack 的建议修改 catch 块：

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

});

现在您可以获取并处理 catch 块中的错误。