useRequestFetch
useRequestFetchコンポーザブルを使用して、サーバーサイドフェッチリクエストのリクエストコンテキストとヘッダーを転送します。
サーバーサイドフェッチリクエストを行う際に、リクエストコンテキストとヘッダーを転送するにはuseRequestFetchを使用できます。
クライアントサイドフェッチリクエストを行う場合、ブラウザは必要なヘッダーを自動的に送信します。しかし、サーバーサイドレンダリング中にリクエストを行う場合、サーバー上でリクエストが行われるため、ヘッダーを手動で転送する必要があります。
転送する必要のないヘッダーは、リクエストに含まれません。たとえば、
transfer-encoding、connection、keep-alive、upgrade、expect、host、acceptなどのヘッダーが含まれます。useFetchコンポーザブルは、リクエストコンテキストとヘッダーを自動的に転送するために内部でuseRequestFetchを使用しています。<script setup lang="ts">
// This will forward the user's headers to the `/api/foo` event handler
// Result: { cookies: { foo: 'bar' } }
const requestFetch = useRequestFetch()
const { data: forwarded } = await useAsyncData(() => requestFetch('/api/cookies'))
// This will NOT forward anything
// Result: { cookies: {} }
const { data: notForwarded } = await useAsyncData(() => $fetch('/api/cookies'))
</script>
クライアントサイドナビゲーション中のブラウザでは、
useRequestFetchは通常の$fetchと同様に動作します。