Nuxt 3集成Laravel Sanctum遇419 CSRF令牌不匹配问题求助

问题场景 #

Nuxt 3部署于http://localhost:3000，Laravel部署于http://localhost:8000，尝试集成Sanctum时，调用登录接口始终返回419: CSRF Token Mismatch错误。已提前调用/sanctum/csrf-cookie接口，且Laravel配置了：

SESSION_DOMAIN=localhost
SANCTUM_STATEFUL_DOMAINS=localhost:3000

解决思路 #

1. 手动携带XSRF-TOKEN请求头 #

Nuxt的useFetch不会自动将Cookie中的XSRF-TOKEN注入请求头，需要在自定义fetch方法中手动添加：

import { useCookie } from '#app'

export const useCustomFetch = (url, opts) => {
    const xsrfToken = useCookie('XSRF-TOKEN')
    return useFetch(url, { 
        baseURL: 'http://localhost:8000',
        credentials: 'include',
        headers: {
            ...opts?.headers,
            'X-XSRF-TOKEN': xsrfToken?.value || ''
        },
        ...opts 
    })
}

2. 修正POST请求的Content-Type #

当前代码使用JSON.stringify处理请求体，需确保请求头匹配application/json，或直接传递对象让Nuxt自动处理：

// 错误写法：手动JSON.stringify
// body: JSON.stringify(formData.value)

// 正确写法：直接传递对象
const { data, error } = await useCustomFetch('/login', {
  method: 'POST',
  body: formData.value
})

3. 验证Laravel配置的有效性 #

• 确认.env中APP_URL=http://localhost:8000
• 检查config/sanctum.php的stateful配置是否正确加载了localhost:3000：

  'stateful' => explode(',', env('SANCTUM_STATEFUL_DOMAINS', 'localhost:3000,127.0.0.1:3000')),
  

• 确认config/session.php的domain设置为localhost：

  'domain' => env('SESSION_DOMAIN', 'localhost'),
  

4. 清除浏览器缓存与Cookie #

旧的Cookie可能导致冲突，清除浏览器中localhost相关的Cookie后，重启浏览器再测试。

5. 确保异步请求的执行顺序 #

要保证csrfToken()完全执行完成后再发起登录请求，需将逻辑包裹在异步函数内：

const handleLogin = async () => {
  await csrfToken()
  const { data, error } = await useCustomFetch('/login', {
    method: 'POST',
    body: formData.value
  })
  // 后续处理逻辑
}

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