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へのブラウザからのリクエストがある場合に役立ちます。
1
2
3
4
5
<script>
let { data } = $props();
</script>
<h1>{data.message}</h1>