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

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

関連記事

Web

Webページの見出しレベルが分かりづらいときないですか?

Webページの見出しレベルが分かりづらい問題を解決します。

Glitch

Glitch プロジェクトの .git ディレクトリ・サイズを小さくしました

Glitch プロジェクトの .git ディレクトリ・サイズを小さくしました。そのときの作業内容を紹介します。

Web

ウェブブラウザが、HTTP/1.1 もしくは HTTP/2 のどちらを使うか判定する仕組み (httpsスキームのみ)

ウェブブラウザが、HTTP/1.1 もしくは HTTP/2 のどちらを使うか判定する仕組み (httpsスキームのみ)について説明します。

HTTPレスポンスヘッダとブラウザキャッシュの関係を調査

目次1. はじめに2. 使用したツールWebサーバー側クライアント側3. 使用する HTML (PHP) ファイル4. 実験パターン1HTML (PHP)のヘッダ出力部分1回目のアクセス2回目のアクセ …

Chrome

Chrome 77 デベロッパーツールの新機能

目次1. はじめに2. 主な新機能要素のスタイルをコピーするレイアウトシフト (layouts shifts) を表示する使い方Audits パネルの Lighthouse 5.1[Performan …