Edge Routine による 302 リダイレクトフォローを実装することで、インタラクション時間 の短縮、アクセス速度の向上、ユーザーエクスペリエンスの強化を実現できます。
使用する場合
ビジネスの負荷が高く、オリジンサーバーからのリダイレクトレスポンスを管理する必要がある場合は、302 リダイレクトフォロー機能を使用します。この機能により、ESA は 302 リダイレクトに自動的に従って、最終的なリソースをフェッチできます。
サンプルコード
期待される効果: クライアントがリクエストを送信し、オリジンサーバーが 302 状態コードを返した場合、ESA プリゼンスポイント(POP)はリダイレクトに自動的に従い、リダイレクトされた結果をクライアントに配信します。
言語:
Javascript例:
/** * fetch は、クライアントからのリクエストを処理するためのカスタマイズされたルーチンです。 * オリジンから返されたステータスコードが 302(一時的なリダイレクト)の場合、 * ESA POP はリダイレクトに従い、リダイレクトされたリクエストの結果をクライアントに返します。 * クライアントリクエストの URL 例:https://example.com/redirect * リダイレクトターゲットの URL 例:https://example.com/target */ export default { async fetch(request) { // Edge Routine にリクエストを送信し、リダイレクトを手動で処理します。 // { redirect: "manual" } オプションを使用して、リダイレクトが自動的に追跡されないようにします。 // これにより、ステータスコード 302 のレスポンスを Edge Routine で処理できます。 const response = await fetch(request, { redirect: "manual" }); // レスポンスのステータスコードを取得します。 const status = response.status; // レスポンスのステータスコードが 302(一時的なリダイレクト)の場合、 if (status === 302) { // レスポンスヘッダーからリダイレクトのターゲットアドレスを取得します。 const redirectLocation = response.headers.get("Location"); // リダイレクトターゲットアドレスに新しいリクエストを送信します。 const res = await fetch(redirectLocation); // リダイレクトされたリクエストの結果をクライアントに返します。 return res; } // レスポンスのステータスコードが 302 でない場合は、Edge Routine のレスポンスを返します。 return response; }, };
デプロイ効果
レスポンスステータスコードが 302 の場合:
POP は、レスポンスの
Locationヘッダーからhttps://example.com/targetを取得し、この URL に新しいリクエストを送信して、レスポンスをクライアントに返します。クライアントは、リダイレクトが発生したことを知らずに、https://example.com/targetからのレスポンスを受信します。Client requested URL: https://example.com/redirect //クライアントがリクエストした元の URL は https://example.com/redirect です。 Redirecting from https://example.com/redirect to https://example.com/target //オリジンサーバーは 302 ステータスコードを返し、https://example.com/target へのリダイレクトを要求しました。レスポンスステータスコードが 302 でない場合:
クライアントは Edge Routine からレスポンスコンテンツを直接受信します。
Client requested URL: https://example.com/redirect //クライアントがリクエストした元の URL は https://example.com/redirect です。