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

Posted

技术标签:

【中文标题】Vuejs Axios POST 请求从 Laravel 后端获取 HTTP422 错误【英文标题】:Vuejs Axios POST request gets HTTP422 error from Laravel backend 【发布时间】: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 errorcsrf_token 无关,可能是什么原因造成的?有没有像min这样的previos经验?以及任何解决方案?

提前感谢您的帮助。

【问题讨论】:

A 422 是一个验证错误,如果您查看请求的响应正文或axios.catch 回调中的控制台日志error.response.data,您可能会看到错误列表。跨度> 【参考方案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】:

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

【讨论】:

以上是关于Vuejs Axios POST 请求从 Laravel 后端获取 HTTP422 错误的主要内容,如果未能解决你的问题,请参考以下文章

(axios) HTTP POST 请求两分钟后失败,Laravel 5 + VueJS

POST 和 PUT 请求中的问题,使用 axios、vuetify 数据表、vuejs

从Vue js到Laravel的axios.post数组,在我的请求中只得到[object Object]

vuejs axios实现跨域http请求接口

无法提交 Axios Post 表单 Nuxt.js (VueJS)

为啥来自 Vuejs 的 Laravel 8 的 AJAX POST 请求会引发 405(不支持的方法)错误?