Nuxt 3 useFetch发送POST请求出现419未知状态错误排查

你的核心问题出在手动提取XSRF-TOKEN的方式存在编码误差，以及没有利用浏览器自动处理Cookie的机制，导致Laravel的CSRF验证不通过。以下是具体的排查和解决步骤：

1. 移除手动提取XSRF-TOKEN的逻辑 #

Laravel Sanctum的CSRF验证依赖浏览器自动传递的Cookie，当你设置credentials: 'include'后，浏览器会自动把XSRF-TOKEN Cookie对应的正确值放入请求头，不需要手动提取。你手动拆分Cookie得到的token可能因为URL编码（比如%3D这类转义字符）导致验证失效。

修改登录请求代码，移除手动设置的X-XSRF-TOKEN头：

await useFetch('http://localhost:8000/login', {
    method: "POST",
    headers: {
        'Accept': 'application/json'
    },
    body: {
        "email": "ukeeling@example.org",
        "password": "password",
    },
    mode: 'cors',
    credentials: "include"
}).then(loginResponse => {
    console.log("login", loginResponse.data);
});

2. 检查Laravel的.env关键配置 #

确保Laravel的环境变量配置正确，这是跨域CSRF验证的基础：

# 会话域名设置为localhost（适配前后端同域名不同端口的情况）
SESSION_DOMAIN=localhost
# 允许Sanctum识别的前端域名
SANCTUM_STATEFUL_DOMAINS=localhost:3000,localhost:8000

3. 优化Nuxt全局Fetch配置（可选） #

在nuxt.config.ts中配置全局fetch选项，避免每个请求都重复设置credentials：

export default defineNuxtConfig({
    nitro: {
        fetchOptions: {
            credentials: 'include'
        }
    }
})

为什么Postman能正常请求？ #

Postman不遵循浏览器的Cookie同源规则，你测试时要么手动传入了正确解码的XSRF-TOKEN，要么Postman的请求绕过了Laravel的CSRF验证逻辑，所以能正常访问，但这和浏览器的实际请求场景不同。

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