Nuxt3中使用Fetch获取数据报错的原因及解决方法

Hey there! As someone who's spent plenty of time debugging fetch issues in Nuxt 3, let's walk through the most common reasons you might be seeing errors when using fetch (either the native API or Nuxt's useFetch composable) and how to fix each one.

1. CORS Issues or Mistyped API Endpoints #

• What's going on: If your API lives on a different domain and doesn't have proper CORS headers configured, browsers will block the request to protect users. Or you might have a simple typo in your endpoint URL (like a missing slash or wrong domain).
• How to fix it:
  • First, double-check your endpoint URL—copy-paste it into your browser to confirm it works.
  • For local development, set up a proxy in nuxt.config.ts to bypass CORS:

    export default defineNuxtConfig({
      nitro: {
        devProxy: {
          '/api': {
            target: 'https://your-api-domain.com',
            changeOrigin: true
          }
        }
      }
    })
    

    Now you can call /api/your-endpoint instead of the full domain, and Nuxt will proxy the request server-side (avoiding browser CORS checks).
  • If you control the API, add CORS headers (like Access-Control-Allow-Origin: * for development—make sure to restrict this to your production domain later).

2. Incorrect Usage of Nuxt's Fetch Composables #

• What's going on: Nuxt's useFetch and useAsyncData have strict rules—they can only be called directly in component setup scripts or Nuxt lifecycle hooks. If you wrap them in a regular function or call them outside setup, you'll get errors. Also, forgetting to handle async/await properly can leave promises hanging.
• How to fix it:
  • Call useFetch directly in your <script setup> block, and use await to resolve the promise:

    <script setup>
    // Correct usage
    const { data, error } = await useFetch('/api/posts')
    
    // Always handle errors!
    if (error.value) {
      console.error('Failed to load posts:', error.value.message)
    }
    </script>
    

  • Avoid putting useFetch inside a function that's called later (like a button click handler)—use native fetch for client-side, on-demand requests instead.

3. Server-Side vs Client-Side Mismatches #

• What's going on: Sometimes fetch works during SSR (server-side rendering) but breaks on the client, or vice versa. This could be because the API isn't accessible from your server (e.g., it's a local API only running on your machine), or you're using browser-specific APIs (like window) in your fetch logic that don't exist on the server.
• How to fix it:
  • Use the server option in useFetch to control where the request runs:

    // Run only on the client (good for APIs that need browser context)
    const { data } = await useFetch('/api/client-only', { server: false })
    
    // Run only on the server (good for private APIs the client can't access)
    const { data } = await useFetch('/api/server-only', { server: true })
    

  • If you need to use browser APIs alongside fetch, wrap them in a process.client check:

    if (process.client) {
      // Use window, navigator, or other browser-only APIs here
      const token = window.localStorage.getItem('auth-token')
      const { data } = await useFetch('/api/protected', {
        headers: { Authorization: `Bearer ${token}` }
      })
    }
    

4. Missing Error Handling #

• What's going on: Even with a perfect setup, network drops, API downtime, or invalid requests (like 404/500 errors) can break your fetch. If you don't catch these errors, they'll crash your component or page.
• How to fix it:
  • For useFetch, always destructure and check the error property:

    <script setup>
    const { data, error } = await useFetch('/api/posts')
    
    if (error.value) {
      // Show a user-friendly error message
      alert(`Oops! Failed to load posts: ${error.value.message}`)
    }
    </script>
    

  • For native fetch, use a try/catch block to handle errors (remember, fetch only rejects on network failures, not HTTP errors—so check res.ok too):

    try {
      const res = await fetch('/api/posts')
      if (!res.ok) throw new Error(`Request failed with status ${res.status}`)
      const data = await res.json()
    } catch (err) {
      console.error('Fetch error:', err)
    }
    

5. Unexpected Response Format #

• What's going on: If your API returns HTML (like an error page) instead of JSON, trying to parse it with res.json() will throw an error. This often happens if you hit a wrong endpoint or the API has an internal server error.
• How to fix it:
  • Check your browser's DevTools Network tab to see what the API is actually returning. Look at the "Response" tab for the request to confirm it's valid JSON.
  • Add checks before parsing the response:

    const res = await fetch('/api/posts')
    const contentType = res.headers.get('content-type')
    
    if (contentType && contentType.includes('application/json')) {
      const data = await res.json()
    } else {
      const text = await res.text()
      console.error('API returned non-JSON response:', text)
    }
    

内容的提问来源于stack exchange，提问作者Cyprian Wacław