$fetch

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

Nuxtは、ofetchを使用して、VueアプリやAPIルート内でHTTPリクエストを行うための$fetchヘルパーをグローバルに公開します。

サーバーサイドレンダリング中に、内部のAPIルートを取得するために$fetchを呼び出すと、関連する関数を直接呼び出し（リクエストをエミュレート）、追加のAPIコールを節約します。

コンポーネント内で$fetchをuseAsyncDataでラップせずに使用すると、データが二重に取得されます：最初はサーバーで、次にクライアントサイドでのハイドレーション中に再度取得されます。これは、$fetchがサーバーからクライアントへの状態を転送しないためです。したがって、クライアントはデータを再度取得する必要があるため、両方の側でフェッチが実行されます。

使用法

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

app.vue

// SSR中、データはサーバーとクライアントの両方で二重にフェッチされます。
const dataTwice = await $fetch('/api/item')

// SSR中、データはサーバー側でのみフェッチされ、クライアントに転送されます。
const { data } = await useAsyncData('item', () => $fetch('/api/item'))

// useAsyncData + $fetchのショートカットとしてuseFetchを使用することもできます
const { data } = await useFetch('/api/item')

こちらも参照 getting-started > data-fetching

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

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 2用に作られた@nuxt/httpや@nuxtjs/axiosの代わりに、NuxtでHTTPコールを行うための推奨方法です。

開発中に自己署名証明書を使用して外部のHTTPS URLを呼び出すために$fetchを使用する場合、環境にNODE_TLS_REJECT_UNAUTHORIZED=0を設定する必要があります。

ヘッダーとクッキーの送信

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

しかし、サーバーサイドレンダリング中は、サーバーサイドリクエストフォージェリ（SSRF）や認証の誤用などのセキュリティリスクのため、$fetchはユーザーのブラウザクッキーを含まず、フェッチレスポンスからのクッキーも渡しません。

// これはSSR中にヘッダーやクッキーを転送しません
const { data } = await useAsyncData(() => $fetch('/api/cookies'))

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

pages/index.vue

// これはユーザーのヘッダーとクッキーを`/api/cookies`に転送します
const requestFetch = useRequestFetch()
const { data } = await useAsyncData(() => requestFetch('/api/cookies'))

しかし、サーバー上で相対URLを使用してuseFetchを呼び出すと、NuxtはuseRequestFetchを使用してヘッダーとクッキーをプロキシします（hostのような転送されるべきでないヘッダーを除く）。

※このページは Nuxt.js 公式ドキュメントの翻訳ページ（非公式）です。

公式ドキュメントの該当ページはこちら：
https://nuxt.com/docs/3.x/api/utils/dollarfetch