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

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

関連記事

Google

Googleマップで調べた経路をホーム画面に追加する (Android)

Android版の Googleマップで調べた経路は、ホーム画面にアイコンとして追加することができます。 手順は以下となります。 Google マップで調べた経路をホーム画面に追加する手順 (1) G …

Chrome

Chrome の「ピクチャー イン ピクチャー」機能を使って、YouTube の動画を最前面で再生する

目次1. Chrome の「ピクチャー イン ピクチャー」機能2. ピクチャー イン ピクチャーを行う方法3. プレイヤーの操作など3. おわりに 1. Chrome の「ピクチャー イン ピクチャー …

Google App Engine

Google App Engine にデプロイしてあるファイルをダウンロードする

Google App Engine にデプロイしてあるファイルをダウンロードする方法について説明します。

Chrome

ブロックされた Cookie を確認する方法 (Chrome の場合)

Chrome ブラウザにおいて、ブロックされた Cookie を確認する方法について説明します。

WordPress

「Build a Custom WordPress User Flow」を試してみました

目次1. はじめにソースコード2. 全体3. Part 1: Replace the Login Page使用している関数アクションフィルタ4. Part 2: New User Registrati …