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/cookies` 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>
export default defineEventHandler((event) => {
const cookies = parseCookies(event)
return { cookies }
})
クライアントサイドのナビゲーション中にブラウザで、
useRequestFetch は通常の $fetch と同様に動作します。