使用axios vuejs和laravel验证表单

Question

我正试图将一些表单数据发送到后端，但Laravel验证不会返回422状态的错误。

公理

简单的axios将请求发送到URL，并希望在请求周期中发现错误时返回响应。

axios.post(this.formURL, formData)
  .then((response) => {
    console.log(response)
  })
  .catch((err) => {
    console.log(err)
  })

Laravel

我已经设置了Laravel验证来验证一些表单输入，如果验证失败，则返回422。

try {
      $this->validate(request(), [
        'chapter_id' => 'required',
        'brother_id' => 'required'
      ]);

      Minute::forceCreate(request());

      return response()->json([
          'status' => 'success',
          'message'    => 'Minute Created',
      ], 201);
  }
  catch (ValidationException $exception) {
      return response()->json([
          'status' => 'error',
          'message'    => 'Error',
          'errors' => $exception->errors(),
      ], 422);
}

回答

给出了一个响应，但当我试图对其进行控制台时，控制台中没有定义：

{
   "status":"error",
   "message":"Error",
   "errors":{
      "brother_id":[
         "The brother_id field is required."
      ],
      "chapter_id":[
         "The chapter_id field is required."
      ]
   }
}

我在这里遇到过这个问题https://github.com/axios/axios/issues/960#issuecomment-398269712但无法使用他们的解决方法解决这个问题。以前有人遇到过这个问题吗？这可能是身份验证关系吗（不太可能），这是我实现的最后一件事。

决议

这个问题解决了。在实现axios拦截器以捕获身份验证错误时，我没有将错误返回给Promise。

  axios.interceptors.response.use(null, (error) => {
    if ( error.response.status == 401 ) {
      store.commit('logout')
      router.push('/login')
    }

    return Promise.reject(error)
  })

返回Promise.reject（错误）丢失。谢谢你们的帮助伙计们！

Answer 1

我认为信息非常清楚（“需要章节id字段”）。问题似乎不是axios的结果，而是相关的数据值​​不会传递到服务器。请检查数据是否通过

return $ request;

服务器端的命令（控制器的启动）。如果数据没有传输，请仔细检查前端。如果传输数据，请尝试更改范围。

try {
  $this->validate(request(), [
    'chapter_id' => 'required',
    'brother_id' => 'required'
  ]);
}
catch (ValidationException $exception) {
  return response()->json([
      'status' => 'error',
      'message'    => 'Error',
      'errors' => $exception->errors(),
  ], 422);
}
Minute::forceCreate(request());

return response()->json([
     'status' => 'success',
     'message'    => 'Minute Created',
], 201);

所以调试它。