$fetch

ソース
Nuxtは、HTTPリクエストを作成するための$fetchヘルパーをグローバルに公開するためにofetchを使用しています。

Nuxt はofetchVueアプリまたはAPIルート内でHTTPリクエストを作成するための$fetchヘルパーをグローバルに公開します。

サーバーサイドレンダリング中、内部APIルートをフェッチするために$fetchを呼び出すと、関連する関数が直接呼び出され（リクエストをエミュレート）、追加のAPI呼び出しを節約します。
useAsyncDataでラップせずにコンポーネントで$fetchを使用すると、データが2回フェッチされます。最初はサーバーで、次にハイドレーション中のクライアントサイドで再度フェッチされます。$fetchはサーバーからクライアントに状態を転送しないためです。したがって、クライアントがデータを再度取得する必要があるため、フェッチは両側で実行されます。

使用方法

コンポーネントデータをフェッチする際にデータの二重取得を防ぐために、useFetchまたはuseAsyncData + $fetchの使用をお勧めします。

app/app.vue
<script setup lang="ts">
// During SSR data is fetched twice, once on the server and once on the client.
const dataTwice = await $fetch('/api/item')

// During SSR data is fetched only on the server side and transferred to the client.
const { data } = await useAsyncData('item', () => $fetch('/api/item'))

// You can also useFetch as shortcut of useAsyncData + $fetch
const { data } = await useFetch('/api/item')
</script>
Docs > 4 X > Getting Started > Data Fetching で詳細をご覧ください。

クライアントサイドでのみ実行される任意のメソッドで$fetchを使用できます。

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>
$fetchは、NuxtでのHTTP呼び出しを行うための推奨される方法です。@nuxt/httpGlobalComponents@nuxtjs/axiosこれらはNuxt 2向けに作られています。
開発中に自己署名証明書を使用して（外部）HTTPS URLを呼び出すために$fetchを使用する場合、環境変数にNODE_TLS_REJECT_UNAUTHORIZED=0を設定する必要があります。

ヘッダーとクッキーを渡す

ブラウザで$fetchを呼び出すと、cookieなどのユーザーヘッダーはAPIに直接送信されます。

ただし、サーバーサイドレンダリング中は、サーバーサイドリクエストフォージェリ (SSRF) や 認証の悪用 などのセキュリティ上のリスクにより、$fetchはユーザーのブラウザクッキーを含まず、フェッチ応答からのクッキーも渡しません。

<script setup lang="ts">
// This will NOT forward headers or cookies during SSR
const { data } = await useAsyncData(() => $fetch('/api/cookies'))
</script>

サーバー上でヘッダーとクッキーを転送する必要がある場合は、手動で渡す必要があります。

app/pages/index.vue
<script setup lang="ts">
// This will forward the user's headers and cookies to `/api/cookies`
const requestFetch = useRequestFetch()
const { data } = await useAsyncData(() => requestFetch('/api/cookies'))
</script>

ただし、サーバー上で相対URLでuseFetchを呼び出すと、NuxtはuseRequestFetchを使用して、ヘッダーとクッキーをプロキシします（hostなど、転送を意図しないヘッダーは除く）。