如何調試 Vue/Laravel 中的 422（不可處理實體）錯誤響應？

Question

我正在嘗試使用Vue 3和Laravel 8構建一個簡單的contact form ，但正在努力將frontend與backend連接起來。 現在我的代碼產生422 (Unprocessable Entity)不可422 (Unprocessable Entity)響應，但我不知道為什么以及如何進行調查。 響應的發生與傳遞的data values無關。 例如name = null和name = myname產生相同的錯誤。

contact.vue ：

<template>
  <section class="contact">
    <form @submit.prevent="storeContact" method="post">
      <input type="text" placeholder="Name" v-model="user.name">
      <input type="text" placeholder="Email" v-model="user.email">
      <input type="text" placeholder="Message" v-model="user.message">
      <button action="post" type="submit">Submit</button>
    </form>
  </section>
</template>


<script>
import {ref} from "vue";

export default {
  setup() {
    let success = false;
    let error = false;
    let user = ref({
      name: null,
      email: null,
      message: null
    });
    function storeContact() {
      axios.post('/contact', Object.values(user.value)
      )
        .then((res) => {
          success = true;
        })
        .catch((error) => {
          error = true;
        })
    };
    return {
      success,
      error,
      user,
      storeContact
    }
  }
}
</script>

web.php :

<?php

use Illuminate\Support\Facades\Route;


Route::get('/', function () {
    return view('welcome');
});

Route::post('/contact', 'App\Http\Controllers\ContactController@submit');

ContactController.php :

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class ContactController extends Controller
{
  public function submit(Request $request) {
    $this->validate($request, [
      'name' => 'required',
      'email' => 'required | email',
      'message' => 'required'
    ]);
    return response()->json(null, 200);
  }
}

Browser console error ：

app.js:17263 POST http://localhost:3000/contact 422 (Unprocessable Entity)

Laravel 日志沒有條目。 這是否意味着這是一個frontend problem ？

編輯：

dev tools network tab中的response顯示：

{"message":"The given data was invalid.","errors":{"name":["The name field is required."],"email":["The email field is required."],"message":["The message field is required."]}}

將這些參數更改為text/values不會帶來任何變化。

編輯2 ：

這些問題已被排除：

Missing CSRF-Token ：不， network選項卡 ( XSRF ) 中存在 csrf 令牌。

null passed ：不，我通過什么無關緊要，結果是一樣的。

Answer 1

正如@Mohammed Naguib 提到的，驗證失敗時返回 422。 根據您的驗證代碼 - 所有屬性都是必需的。

$this->validate($request, [
  'name' => 'required',
  'email' => 'required | email',
  'message' => 'required'
]);

所以我建議將調試過程分為2個。

(1) - 前端是否發送數據？

在 contact.vue 上，在發送 post 請求之前。 對用戶對象使用 console.debug 並檢查您發送的數據。

   let user = ref({
      name: null,
      email: null,
      message: null
    });
    function storeContact() {
      console.debug(user);
      console.debug(Object.values(user.value));

      axios.post('/contact', Object.values(user.value)

檢查開發人員工具上的控制台，並檢查用戶對象的 console.debug 命令的輸出以及您在請求中發送的值。

如果其中一個屬性為空 - 前端有問題。

(2) - 后端

刪除 $this->validate() 函數並簡單地 var_dump $request 對象。 您是否看到相關屬性（姓名、電子郵件、地址）並且它們是否具有所需的值？

我猜：

如果我沒記錯的話Object.values(user.value)會創建一個包含值的數組，因此請求中將缺少屬性名稱。

Answer 2

您遇到此問題是因為您在沒有 CSRF 令牌的情況下向服務器發布。 以下是有關如何解決此問題的類似案例。

如何將 Laravel CSRF 令牌值傳遞給 vue

您需要將 CSRF 令牌從 DOM 復制到 axios 請求的標頭或將其附加到公共標頭。 完成后，您的 POST 請求將可以處理。 或者要確認這一點，您可以轉到文件 app/Http/Middleware/VerifyCsrfToken.php 並將您的路徑添加到 'except' 數組

<?php

namespace App\Http\Middleware;

use Illuminate\Foundation\Http\Middleware\VerifyCsrfToken as Middleware;

class VerifyCsrfToken extends Middleware
{
    /**
     * The URIs that should be excluded from CSRF verification.
     *
     * @var array
     */
    protected $except = [
        '/contact'
    ];
}

Answer 3

原來我在axios.post有一個錯字：

將axios.post('/contact', Object.values(user.value))更改為axios.post('/contact', user.value)

並將數據設置為非null解決了我的問題。

謝謝大家的幫助。