307 Temporary Redirect を設定するその他の方法【HTMLリダイレクト、HTTPヘッダー、htaccessファイルなど】

2024-04-02

HTTPステータスコード 307 Temporary Redirect とは？

例:

サーバメンテナンス中
コンテンツの更新中
イベント開催期間中のみ別のURLで提供

307リダイレクトの特徴:

一時的な移転であること
元のURLへのアクセスが将来的に復活する可能性があること
SEO対策上、元のURLの権威性を維持できること
POSTメソッドなどのリクエストもリダイレクトされること

307リダイレクトと302 Foundの違い:

307 Temporary Redirect と 302 Found は、どちらもリダイレクトを指示するステータスコードですが、以下の点で違いがあります。

項目	307 Temporary Redirect	302 Found
移転の永続性	一時的な移転	永続的な移転
SEO対策	元のURLの権威性を維持	元のURLの権威性を移転先に譲渡
リクエストメソッド	POSTなどのリクエストもリダイレクト	POSTなどのリクエストはリダイレクトされない

307リダイレクトの使い分け:

コンテンツの移転が一時的な場合
SEO対策を重視する場合
POSTなどのリクエストもリダイレクトしたい場合

307リダイレクトの例:

サーバメンテナンス中に、ユーザーをメンテナンス告知ページへリダイレクトする
イベント開催期間中のみ、イベント特設ページへリダイレクトする
ログイン後のユーザーを、マイページへリダイレクトする

307リダイレクトの実装方法:

307リダイレクトは、Webサーバの設定ファイルやプログラムコードで実装できます。

Webサーバの設定ファイル:

# Apacheの場合
Redirect 307 /old-url /new-url

# Nginxの場合
rewrite ^/old-url$ /new-url permanent;

プログラムコード:

# Pythonの場合
from flask import redirect

@app.route("/old-url")
def old_url():
  return redirect("/new-url", code=307)

HTTPステータスコード 307 Temporary Redirect のサンプルコード

Python

from flask import redirect

@app.route("/old-url")
def old_url():
  return redirect("/new-url", code=307)

@app.route("/new-url")
def new_url():
  return "This is the new URL."

JavaScript

// JavaScriptで307リダイレクトを行う例

function redirect() {
  window.location.href = "/new-url";
  window.location.replace("/new-url"); // POSTリクエストもリダイレクトしたい場合
}

// リダイレクトを実行
redirect();

このコードは、JavaScriptを使って、/new-url へ307リダイレクトする例です。

Nginx

# Nginxの設定ファイル

server {
  listen 80;
  server_name localhost;

  location /old-url {
    rewrite ^/old-url$ /new-url permanent;
  }

  location /new-url {
    root /var/www/html;
    index index.html;
  }
}

この設定ファイルは、Nginxを使って、/old-url を /new-url へ307リダイレクトする例です。

Apache

# Apacheの設定ファイル

<VirtualHost *:80>
  ServerName localhost

  Redirect 307 /old-url /new-url

  DocumentRoot /var/www/html

  <Directory /var/www/html>
    Options Indexes FollowSymLinks
    AllowOverride All
  </Directory>
</VirtualHost>

この設定ファイルは、Apacheを使って、/old-url を /new-url へ307リダイレクトする例です。

上記以外にも、様々な言語やフレームワークで307リダイレクトを実装することができます。

HTTPステータスコード 307 Temporary Redirect を実装するその他の方法

HTMLリダイレクト

HTMLの <meta> タグを使って、307リダイレクトを設定することができます。

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="refresh" content="0; URL=/new-url">
  <title>307 Temporary Redirect</title>
</head>
<body>
  <h1>This page has been temporarily moved to <a href="/new-url">here</a>.</h1>
</body>
</html>

このコードは、3秒後に /new-url へ自動的にリダイレクトする例です。

HTTPヘッダーに Location フィールドを追加することで、307リダイレクトを設定することができます。

# Pythonの場合
from flask import Response

@app.route("/old-url")
def old_url():
  headers = {"Location": "/new-url"}
  return Response(status=307, headers=headers)

このコードは、Flaskフレームワークを使って、/old-url を /new-url へ307リダイレクトする例です。

.htaccess ファイル

Apacheを使っている場合は、.htaccess ファイルを使って307リダイレクトを設定することができます。

# .htaccessファイル

Redirect 307 /old-url /new-url

このコードは、/old-url を /new-url へ307リダイレクトする例です。

Sec-CH-UA-Model ヘッダーの活用：ユーザーエクスペリエンスの向上

ユーザーエージェント文字列よりも詳細な情報を提供ブラウザベンダーとモデル名バージョン情報プラットフォーム情報ブランド情報 (一部のブラウザでは非公開)ユーザーのブラウザをより正確に特定より適切なコンテンツと機能を提供パフォーマンスの向上プライバシーの保護 (一部のブラウザではブランド情報が非公開)

COOPを実装する方法

COOP は以下の設定が可能です。same-origin: 閲覧コンテキストを同一オリジン文書に限定します。つまり、クロスオリジン文書は同じ閲覧コンテキストに読み込まれません。unsafe-none: COOP による分離を回避します。これは、COOP を設定しない場合と同じ動作です。

JavaScript API、ユーザー設定、サードパーティライブラリ、ゲームエンジン... あなたに合った方法でゲームパッドへのアクセスを制御しよう！

Feature-Policy: gamepad は、ゲームパッドへのアクセスを制御します。このヘッダーを設定することで、Web サイトがユーザーのゲームパッドを使用する前に許可を得ることができます。<許可 | 拒否> は、以下のいずれかになります。

"Max-Forwards" ヘッダーは、HTTPリクエストがプロキシサーバーを経由する最大回数を指定します。これは、リクエストが無限ループに陥ったり、過剰なリソースを消費したりすることを防ぐために使用されます。仕組み"Max-Forwards" ヘッダーは、クライアントまたはプロキシサーバーによって設定されます。値は10進数で、リクエストが許可される最大ホップ数を表します。例えば、"Max-Forwards: 3" と設定すると、リクエストは3つのプロキシサーバーを経由することしかできません。

HSTS ヘッダーを設定するその他の方法：Cloudflare、Web アプリケーションフレームワーク

仕組みサーバーは HSTS ヘッダーをレスポンスに含めます。ブラウザは HSTS ヘッダーを受け取ると、一定期間 (max-age) はそのサイトへのアクセスを HTTPS 接続のみ許可します。期間内であれば、ブラウザは URL が HTTP であっても自動的に HTTPS に変換してアクセスします。

Acceptヘッダーの代替方法：Content-Negotiation、クエリパラメータ、HTTPメソッド

Accept ヘッダーは、カンマ区切りのメディアタイプリストで構成されます。各メディアタイプは、次の形式で指定されます。例えば、次の Accept ヘッダーは、HTML、JSON、XML のいずれかを処理できることを示します。サーバーはこのリストを順番に処理し、クライアントが処理できる最初のメディアタイプを選択します。

サーバーとJavaScript APIで利用可能なClear-Site-Dataヘッダー

プログラミングでの利用Clear-Site-Dataは、サーバー側の設定とクライアント側のJavaScript APIの両方で利用できます。サーバー側の設定では、以下の方法でClear-Site-Dataヘッダーをレスポンスに追加できます。

302 Found vs. 301 Moved Permanently：違いを理解する

コード: 302理由: FoundRFC: 9110説明: クライアントがリクエストしたリソースは、別の URL に移動されました。クライアントは、Location ヘッダーフィールドに指定された URL にリダイレクトする必要があります。

Sec-CH-UA-Model ヘッダーの活用：ユーザーエクスペリエンスの向上

さまざまなプログラミング言語における Access-Control-Allow-Methods 設定サンプルコード

Access-Control-Allow-Methods は、異なるオリジンからのリクエストに対して許可される HTTP メソッドを指定する HTTP ヘッダーです。これは、クロスオリジンリソースシェアリング (CORS) において重要な役割を果たします。