本文へスキップ

event オブジェクトには、標準のFetch APIのように動作するfetchメソッドがありますが、特別な機能があります。

  • これは、受信リクエストからcookieおよびauthorizationヘッダーを継承するため、サーバーで認証済みリクエストを行うために使用できます。
  • サーバー上で相対的なリクエストを行うことができます(通常、fetchはサーバーコンテキストで使用される場合、オリジンを含むURLを必要とします)。
  • 内部リクエスト(例:+server.jsルートの場合)は、サーバー上で実行されている場合、HTTP呼び出しのオーバーヘッドなしで、ハンドラ関数に直接渡されます。

その動作は、デフォルトでは次のようになるhandleFetchフックで変更できます。

src/hooks.server
export async function handleFetch({ event, request, fetch }) {
	return await fetch(request);
}

たとえば、src/routes/a/+server.jsへのリクエストに、代わりにsrc/routes/b/+server.jsからのレスポンスで応答できます。

src/hooks.server
export async function handleFetch({ event, request, fetch }) {
	const url = new URL(request.url);
	if (url.pathname === '/a') {
		return await fetch('/b');
	}

	return await fetch(request);
}

後でユニバーサルload関数について説明しますが、event.fetchはブラウザからも呼び出すことができます。そのシナリオでは、handleFetchは、サーバー上で実行されている場合、APIサーバーとパブリックインターネットの間に存在するプロキシとロードバランサーをバイパスして、内部URLにリダイレクトする必要がある、https://api.yourapp.comなどのパブリックURLへのブラウザからのリクエストがある場合に役立ちます。

GitHub でこのページを編集する

1
2
3
4
5
<script>
	let { data } = $props();
</script>
 
<h1>{data.message}</h1>