Nuxt utiliza ofetch para exponer globalmente el helper $fetch para realizar solicitudes HTTP dentro de tu aplicación Vue o rutas API.

Uso

Recomendamos usar useFetch o useAsyncData + $fetch para evitar la obtención doble de datos al obtener los datos del componente.

// Durante SSR los datos se obtienen dos veces, una en el servidor y otra en el cliente.
const dataTwice = await $fetch('/api/item')

// Durante SSR los datos se obtienen solo en el lado del servidor y se transfieren al cliente.
const { data } = await useAsyncData('item', () => $fetch('/api/item'))

// También puedes usar useFetch como atajo de useAsyncData + $fetch
const { data } = await useFetch('/api/item')

Puedes usar $fetch en cualquier método que se ejecute solo en el lado del cliente.

<script setup lang="ts">
async function contactForm() {
  await $fetch('/api/contact', {
    method: 'POST',
    body: { hello: 'world '}
  })
}
</script>

<template>
  <button @click="contactForm">Contactar</button>
</template>

Pasando Headers y Cookies

Cuando llamamos a $fetch en el navegador, headers de usuario como cookie se enviarán directamente a la API.

Sin embargo, durante la Renderización del Lado del Servidor, debido a riesgos de seguridad como Server-Side Request Forgery (SSRF) o Uso indebido de Autenticación, $fetch no incluirá las cookies del navegador del usuario, ni pasará cookies de la respuesta de fetch.

// Esto NO reenviará headers o cookies durante SSR
const { data } = await useAsyncData(() => $fetch('/api/cookies'))

Si necesitas reenviar headers y cookies en el servidor, debes pasarlos manualmente:

// Esto reenviará los headers y cookies del usuario a `/api/cookies`
const requestFetch = useRequestFetch()
const { data } = await useAsyncData(() => requestFetch('/api/cookies'))

Sin embargo, al llamar a useFetch con una URL relativa en el servidor, Nuxt usará useRequestFetch para proxy headers y cookies (con la excepción de headers que no deben ser reenviados, como host).