導入
フロントエンド開発やNext.js等のサーバーサイドレンダリング（SSR）環境において、Fetch APIの「Requestオブジェクト」を扱う機会は増えています。特にミドルウェアやインターセプターを実装する際、現在どのURLに対してリクエストが投げられているかを正確に把握することは、認証やルーティング制御において非常に重要です。Request.prototype.url を正しく活用することで、柔軟で堅牢なリクエスト制御を実現できます。
基礎知識
Request APIは、Fetch APIで使用されるHTTPリクエストを表すインターフェースです。そのプロパティの一つである「url」は、リクエスト先のリソースURLを文字列として保持しています。単なる文字列として取得できるだけでなく、URLオブジェクトと組み合わせることで、クエリパラメータの解析やパスの特定が非常に容易になります。
実装/解決策
RequestオブジェクトからURL情報を取得する際は、単に文字列として扱うのではなく、組み込みの「URLコンストラクタ」に渡すのが定石です。これにより、ホスト名、パス、検索パラメータを個別に安全に抽出できます。特に、相対パスでリクエストが飛んできた場合でも、ベースURLを補完することで一貫した処理が可能になります。
サンプルプログラム
以下のコードは、ミドルウェア内でリクエストURLを解析し、特定のパスやクエリパラメータに応じて処理を分岐させる実用的な例です。
/
- リクエストを解析し、パスやクエリに基づいた制御を行う関数
- @param {Request} request – Fetch APIのRequestオブジェクト
/
async function handleRequest(request) {
// 1. Request.prototype.url を取得
const requestUrl = request.url;
// 2. URLオブジェクトに変換して解析を容易にする
// 第2引数にベースURLを指定することで、相対パスの場合でも安全に解析可能
const url = new URL(requestUrl, ‘https://example.com’);
// 3. パスによる制御
if (url.pathname === ‘/api/v1/user’) {
console.log(‘ユーザー情報取得APIへのアクセスを検知’);
}
// 4. クエリパラメータの取得（例: ?id=123）
const userId = url.searchParams.get(‘id’);
if (userId) {
console.log(`対象ユーザーID: ${userId}`);
}
return new Response(‘Success’, { status: 200 });
}
応用・注意点
現場で陥りやすい罠として、Requestオブジェクトのコピーや再利用があります。Requestオブジェクトは一度読み取ると「Body」が消費されるため、URL情報を取得した後に再度Fetchを行う場合は、元のRequestをクローンする（request.clone()）などの工夫が必要です。また、デプロイ環境によってはプロキシ越しにリクエストが来るため、`request.url` が期待したドメインを含まない場合があります。その際は `x-forwarded-proto` などのヘッダー情報を加味してベースURLを調整するロジックを検討してください。これらを網羅することで、より安定したフロントエンド/ミドルウェア基盤が構築できます。