Nuxt3函数内调用Laravel登录API返回419错误求助

我是Nuxt3新手，将登录API调用封装在函数内时返回419错误，但直接调用该API却能正常返回200状态码。尝试过ohmyfetch和lazyfetch，问题仍未解决。

表单代码 #

<div>
    <div class="grid grid-cols-4 gap-5"></div>
    <div class="w-full max-w-xs">
      <form
        class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4"
        method="POST"
        @submit.prevent="onSubmit"
      >
        <div class="mb-4">
          <label class="block text-gray-700 text-sm font-bold mb-2" for="email">
            Email
          </label>
          <input
            class="
              shadow
              appearance-none
              border
              rounded
              w-full
              py-2
              px-3
              text-gray-700
              leading-tight
              focus:outline-none focus:shadow-outline
            "
            id="email"
            type="text"
            name="email"
            placeholder="Email"
            v-model="form.email"
          />
        </div>
        <div class="mb-6">
          <label
            class="block text-gray-700 text-sm font-bold mb-2"
            for="password"
          >
            Password
          </label>
          <input
            class="
              shadow
              appearance-none
              border
              rounded
              w-full
              py-2
              px-3
              text-gray-700
              mb-3
              leading-tight
              focus:outline-none focus:shadow-outline
            "
            v-model="form.password"
            id="password"
            name="password"
            type="password"
            placeholder="******************"
          />
        </div>
        <div class="flex items-center justify-between">
          <button
            class="
              bg-blue-500
              hover:bg-blue-700
              text-white
              font-bold
              py-2
              px-4
              rounded
              focus:outline-none focus:shadow-outline
            "
            type="submit"
          >
            Sign In
          </button>
          <a
            class="
              inline-block
              align-baseline
              font-bold
              text-sm text-blue-500
              hover:text-blue-800
            "
            href="#"
          >
            Forgot Password?
          </a>
        </div>
      </form>
      <p class="text-center text-gray-500 text-xs">
        &copy;2020 Acme Corp. All rights reserved.
      </p>
    </div>
  </div>

封装的函数代码（返回419） #

<script setup>
const url = "http://localhost:8085/api/auth/login";

const form = reactive({
  email: "janedoe123@gmail.com",
  password: "jane123",
});

async function onSubmit() {
  const { data, error } = await $fetch(url, {
    method: "POST",
    headers: {
      "x-api-key": "base64:l/KMGWeUbHwHNrlQXOmpFXTafrccJ8KZvlCaTUEkSOw=",
    },
    body: { form },
  });

  console.log(data, error);
}
</script>

直接调用正常工作的代码 #

const { data, error } = await useFetch(
"http://localhost:8085/api/auth/login",
{
  method: "POST",
  headers: {
    "x-api-key": "base64:l/KMGWeUbHwHNrlQXOmpFXTafrccJ8KZvlCaTUEkSOw=",
    "Access-Control-Allow-Origin": "*",
  },
  body: {
    email: "janedoe@gmail.com",
    password: "janedoe123",
  },
}
);

问题原因及解决方法 #

• 请求体格式错误：封装函数中body: { form }会把参数嵌套在form对象里，后端接收的是{form: {email: "...", password: "..."}}，而直接调用的代码是传递顶级的email和password字段，后端可能无法识别嵌套格式，导致验证失败返回419。
• 多余的请求头：Access-Control-Allow-Origin是后端响应头，前端添加这个请求头没有意义，可以删除。
• CSRF Token缺失：如果后端开启了CSRF保护，POST请求需要携带CSRF Token。Nuxt3中可以通过useCsrfToken()获取Token并添加到请求头。

修正后的函数代码：

<script setup>
const url = "http://localhost:8085/api/auth/login";

const form = reactive({
  email: "janedoe123@gmail.com",
  password: "jane123",
});

async function onSubmit() {
  const csrfToken = useCsrfToken();
  const { data, error } = await $fetch(url, {
    method: "POST",
    headers: {
      "x-api-key": "base64:l/KMGWeUbHwHNrlQXOmpFXTafrccJ8KZvlCaTUEkSOw=",
      'X-CSRF-TOKEN': csrfToken
    },
    body: form, // 直接传递form对象，无需嵌套
  });

  console.log(data, error);
}
</script>

内容的提问来源于stack exchange，提问作者lilyco