Question

嗨，我在前端使用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％肯定。

所以我的问题是：

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

预先感谢您的帮助。

Answer 1

请，建议将捕获块修改为 @Jack ：

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

});

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

Answer 2

.catch(function (error) { console.log(error.response.data.errors); }); 请使用此代码，我希望它有效。

Answer 3

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

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

Answer 4

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

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

Answer 5

这对我很有帮助，因为我可以使用以下命令查看 Laravel 中发生的事情：

node --trace-warnings ...

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

5 个答案: