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

【问题标题】：Vuejs Axios POST request gets HTTP422 error from Laravel backendVuejs Axios POST 请求从 Laravel 后端获取 HTTP422 错误
【发布时间】：2019-09-29 16:32:09
【问题描述】：

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

现在我从 Vuejs 向 Laravel 发送 Axios POST 请求。所有表单输入值都使用 HTML5 required 属性进行了预验证。而当我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 条件。我试图弄清楚这个错误可能来自哪里。我目前认为这可能是由于 POST 请求中没有csrf_token。当我在 Laravel 外部发送请求时，表单中缺少 csrf_token。不过，我不是 100% 确定这一点。

所以我的问题是：

我如何在 Axios POST 请求中包含 csrf_token，何时我从 Laravel 外部发送它。
如果此422 error 与csrf_token 无关，可能是什么原因造成的？有没有像min这样的previos经验？以及任何解决方案？

提前感谢您的帮助。

【问题讨论】：

A 422 是一个验证错误，如果您查看请求的响应正文或axios.catch 回调中的控制台日志error.response.data，您可能会看到错误列表。跨度>

标签： laravel vue.js post axios http-error

【解决方案1】：

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

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

});

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

【讨论】：

【解决方案2】：

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

请使用此代码，我希望它能正常工作。

【讨论】：

【解决方案3】：

我也面临同样的问题，我认为这是由于 vue.js 的 Api 请求中缺少一些标头。这里有一些提示可以帮助您解决这个问题。

确保您是否保护了您的 Api 路由（通过圣所或其他方式）。如果您正在保护，请确保您在标头中发送身份验证令牌。
其次确保您的请求（axios 或 jwt）应包含有效数据，如果您要发送图像或文件等，请确保我们如何发送它们。
首先，通过 dd($erquest->all()); 获取请求并签入 laravel；如果您正在接收数据然后验证，则 laravel 请求可能不包含您发送的数据。 .

【讨论】：

【解决方案4】：

这些错误可能是由于以下原因引起的，请确保遵循以下步骤。将本地主机与本地虚拟机（主机）连接起来。在这里，我将 http://localhost:3001/ 连接到 http://abc.test 应遵循的步骤：

我们必须允许 CORS，将 Access-Control-Allow-Origin:* 放在请求的标头中可能不起作用。安装支持 CORS 请求的 google 扩展程序。
确保您在请求中提供的凭据有效。
确保已配置 vagrant。试试 vagrant up --provision 这使本地主机连接到宅基地的数据库。

【讨论】：

【解决方案5】：

只需单击开发工具中网络部分的预览选项卡，您就会看到实际的错误消息。

【讨论】：