Vue3+Nuxt3+TypeScript首次API请求始终返回null求助

1. 检查Laravel Sanctum的CSRF令牌与跨域配置 #

Laravel Breeze + Sanctum的API请求依赖正确的CSRF令牌和跨域设置，首次请求可能因令牌未正确携带导致服务端拒绝返回数据：

• 确认config/cors.php中supports_credentials设为true，allowed_origins包含你的Nuxt前端域名（如http://localhost:3000）
• 在Nuxt的入口组件（如app.vue）中初始化时先获取Sanctum CSRF令牌：

  async function initSanctum() {
    await fetch('http://你的LaravelAPI域名/sanctum/csrf-cookie', {
      credentials: 'include'
    })
  }
  onMounted(() => initSanctum())
  

2. 处理Nuxt SSR/CSR环境的请求差异 #

SSR模式下首次请求由服务端发起，无法获取浏览器Cookie（含Sanctum令牌），导致认证失败返回空数据：

• 强制需要认证的API请求在客户端执行，在useFetch或原生fetch中添加对应配置：

  // 使用Nuxt useFetch的情况
  const { data } = await useFetch('/api/cart', {
    credentials: 'include',
    server: false // 强制客户端发起请求
  })
  
  // Pinia中使用原生fetch的情况
  import { process } from '@nuxt/ui'
  export const useCartStore = defineStore('cart', () => {
    const productsData = ref(null)
  
    const loadDisplayCart = async () => {
      if (process.client) { // 仅在客户端执行请求
        const res = await fetch(`${你的API地址}/api/cart`, {
          credentials: 'include'
        })
        productsData.value = await res.json()
      }
    }
  
    return { productsData, loadDisplayCart }
  })
  

3. 验证API路由的认证中间件与用户状态 #

确认API路由正确使用auth:sanctum中间件，且首次请求时用户已完成登录：

• 在调用loadDisplayCart前检查用户认证状态：

  const authStore = useAuthStore()
  const loadDisplayCart = async () => {
    if (authStore.user) { // 确保用户已登录
      // 发起API请求
    }
  }
  

4. 排查缓存与请求时机问题 #

• 避免错误的缓存策略导致首次请求返回空数据，在fetch中添加缓存配置：

  const res = await fetch('/api/cart', {
    credentials: 'include',
    cache: 'no-store'
  })
  

• 确保loadDisplayCart在客户端挂载后调用，而非SSR阶段直接执行：

  <script setup>
  const cartStore = useCartStore()
  onMounted(async () => {
    await cartStore.loadDisplayCart()
  })
  </script>
  

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