如何调试Vue/Laravel项目中422（Unprocessable Entity）错误响应

该问题属于前端代码逻辑错误，与CSRF配置、后端验证规则无关。

你在storeContact方法中调用axios.post时，使用Object.values(user.value)处理请求参数：

• Object.values()的作用是提取对象的所有值，转为无键名的索引数组。例如你输入的内容为name: "测试"、email: "test@demo.com"、message: "测试内容"，处理后会变成["测试", "test@demo.com", "测试内容"]
• Laravel后端的验证逻辑是按name、email、message三个键名读取请求参数的，收到无对应键名的数组时，会判定所有字段都未传值，因此无论你输入什么内容，都会返回字段必填的422错误。

直接修改contact.vue中storeContact方法的axios传参逻辑，删除Object.values()包装，直接传入user.value即可，同时注意catch内的形参不要和你定义的error变量重名，避免赋值失效：

function storeContact() {
  axios.post('/contact', user.value)
    .then((res) => {
      success = true;
    })
    .catch((err) => {
      error = true;
    })
}

修改后提交表单，打开浏览器开发者工具的Network标签，查看/contact请求的Payload：

• 修复前Payload为数组格式：[ "测试", "test@demo.com", "测试内容" ]
• 修复后Payload为对象格式：{ "name": "测试", "email": "test@demo.com", "message": "测试内容" }
  符合上述修复后的特征即可正常通过后端验证。

内容的提问来源于stack exchange，提问作者Artur Müller Romanov