Web

URLリダイレクトの動作

投稿日:2019年9月10日 更新日:

1. URL リダイレクト

いろいろなウェブサイトを見ていると、「あるURLにブラウザでアクセスしたら、別のURLに飛ばされた」ことが幾度となくあるでしょう(気付いていない場合も含めて)。ウェブサイトの作り方として、この動きを実現する方法はいろいろあるのですが、よくあるのが「URLリダイレクト」というやり方です。

2. URL リダイレクトの動き

どういう仕組みになっているか知るために、HTTPリクエスト/レスポンスを観察してみましょう。

※ 説明に使っているスクリーンショットは、Chrome ブラウザのデベロッパーツールの中にある [Network]タブになります。

(1) ウェブブラウザが、特定のURLにアクセスします。

以下のスクリーンショットは、このとき送信されるHTTPリクエスト(ヘッダ部分)の例です。この場合は、https://misc.laboradian.com/http-redirect/ というURLにアクセスしていることが分かります。これは至って普通のリクエストです。

ウェブブラウザからウェブサーバーに送信されるHTTPリクエスト

(2) ウェブサーバーがレスポンスを返します。

ウェブサーバーは、リクエストされたURLが表すリソースをHTTPレスポンスという形で送り返します。

今回アクセスしたウェブサーバーでは、(1) のURLに対してリダイレクトが行われるよう設定されていると仮定し、このとき返されるレスポンスのヘッダ部分が以下であったとします。

ウェブサーバーから返されるHTTPレスポンスのヘッダ部分

まず、status フィールドに「302」という数値がセットされていることが分かります。このフィールドは「HTTPステータスコード」といって、ウェブブラウザが送信したリクエストに対する結果を表しており、「302」は「一時的にURLが変更されている」ことを意味しています。また、location というフィールドには URL がセットされていますが、これが変更先のURL、つまり「リダイレクト先のURL」を表しています。

ということで、ウェブサーバーはウェブブラウザに対して

location フィールドにセットしたURLにアクセスし直してください

と伝えていることになります。これが URLリダイレクトであり、あとはウェブブラウザがその指示に従うだけです。

(3) ウェブブラウザはリダイレクト先URLにアクセスします。

ウェブブラウザは、HTTPレスポンスヘッダの location フィールドで指定されたURLにアクセスを行います。

リダイレクト先URLに対するHTTPリクエストヘッダ

(4) ウェブサーバーは、リクエストされたURLで表されるリソースを返却します。

ウェブサーバーは、ウェブブラウザからリクエストされたURLに対応するリソースを「HTTPレスポンス」として返しますが、そのヘッダ部分が以下となります。

ウェブサーバーからの最終的な

status200 になっていますが、これはリクエストが成功して、要求されたリソースが返されたことを意味しています。

ウェブブラウザで(1)のURLにアクセスすると、ここまでの処理がまとめて実行されます。これが URLリダイレクトの動きです。

3. デモページ

URLリダイレクトのデモページを用意しました。

デモページ

🔗 リダイレクトのテスト

ウェブブラウザのデベロッパーツールを使い、ウェブブラウザとウェブサーバーが今回説明したやり取りをしているか確認してみましょう。

📂-Web

執筆者:labo


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

Chrome

Chrome で拡張機能を使わずにスクリーンショットを撮る方法

Chrome で拡張機能を使わずにスクリーンショットを撮る方法について説明します。

インターネット上での検索方法

Google 画像検索を表すURL http://images.google.com/search?tbm=isch&q=検索キーワード 執筆中

Web

Gmail でよく使うキーボードショートカット

Gmail でよく使うキーボードショートカットを紹介します。 1. Gmail のキーボードショートカットを有効にする手順 まず、Gmail でキーボードショートカットを利用するには、設定で有効にする …

no image

Webサイトのスタイルガイド作成

参考 Webデザインのスタイルガイドの作り方 | UX MILK

Web Vitals

Chrome UX Report API を使う手順 (cURL の場合)

Chrome UX Report API を使う手順 (cURL の場合)を紹介します。