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で、ツールバー上の拡張機能アイコンをメニューに移動させる方法について説明します。

Web

投稿日時のところに「○時間(前)」と表示されるサービスについての疑問

投稿日時のところに「○時間(前)」と表示されるサービスについての疑問です。

Web

AMP for WordPress プラグインを使って WordPressサイトをAMP対応する手順

目次1. AMP とは?なぜ、AMP が必要なのか?AMP フレームワーク1. AMP HTML2. AMP JS3. AMP キャッシュその他2. AMP for WordPress プラグインにつ …

Web

インターネットの説明に欠けているもの?

 株式会社日本レジストリサービス(以下JPRS、本社:東京都千代田区、代表取締役社長 東田幸樹)は、インターネット教育の支援活動の一環として、全国の中学校・高校・高等専門学校を対象に、マンガ小冊子『ポ …

Web

Firefox で複数のプロファイルを使い分ける方法

目次1. Firefox のプロファイルについて2. プロファイルによって管理できるもの3. プロファイルの場所プロファイルの場所の確認方法4. プロファイルマネージャープロファイルマネージャーの起動 …