$fetch

Nuxt uses ofetch to expose globally the $fetch helper for making HTTP requests within your Vue app or API routes.

::tip{icon="i-lucide-rocket"} During server-side rendering, calling $fetch to fetch your internal API routes will directly call the relevant function (emulating the request), saving an additional API call. ::

::note{color="blue" icon="i-lucide-info"} Using $fetch in components without wrapping it with useAsyncData causes fetching the data twice: initially on the server, then again on the client-side during hydration, because $fetch does not transfer state from the server to the client. Thus, the fetch will be executed on both sides because the client has to get the data again. ::

Usage#

We recommend using useFetch or useAsyncData + $fetch to prevent double data fetching when fetching the component data.

```vue [app/app.vue]

:read-more{to="/docs/4.x/getting-started/data-fetching"}

You can use `$fetch` in any methods that are executed only on client-side.

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

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

::tip $fetch is the preferred way to make HTTP calls in Nuxt instead of @nuxt/http and @nuxtjs/axios that are made for Nuxt 2. ::

::note If you use $fetch to call an (external) HTTPS URL with a self-signed certificate in development, you will need to set NODE_TLS_REJECT_UNAUTHORIZED=0 in your environment. ::

Passing Headers and Cookies#

When we call $fetch in the browser, user headers like cookie will be directly sent to the API.

However, during Server-Side Rendering, due to security risks such as Server-Side Request Forgery (SSRF) or Authentication Misuse, the $fetch wouldn't include the user's browser cookies, nor pass on cookies from the fetch response.

::code-group

```vue [app/pages/index.vue]

```ts [server/api/cookies.ts]
export default defineEventHandler((event) => {
  const foo = getCookie(event, 'foo')
  // ... Do something with the cookie
})

::

If you need to forward headers and cookies on the server, you must manually pass them:

```vue [app/pages/index.vue]

```

However, when calling useFetch with a relative URL on the server, Nuxt will use useRequestFetch to proxy headers and cookies (with the exception of headers not meant to be forwarded, like host).