結論
開発環境で http://localhost:3000 が https://localhost:3000
に勝手にリダイレクトされる問題は、ChromeのHSTS設定が原因です。
はじめに
開発環境で http://localhost:3000 にアクセスすると、自動的に https://localhost:3000 にリダイレクトされてしまう問題に遭遇したことはありませんか？
これはChromeの HSTS（HTTP Strict Transport Security）
という機能が原因で発生します。本記事では、この問題の原因と複数の解決方法を紹介します。
問題の原因
ChromeはセキュリティのためにHSTSという仕組みを採用しており、一度HTTPSでアクセスしたドメイン（localhostを含む）を記憶し、次回以降は自動的にHTTPSにリダイレクトする仕様になっています。
開発環境ではHTTPSを使わないことが多いため、この設定が邪魔になることがあります。
解決方法
方法1: ChromeのHSTS設定をクリア（推奨）
最も確実な方法は、localhostのHSTS設定を削除することです。
手順
-
Chromeのアドレスバーに以下を入力してアクセス
chrome://net-internals/#hsts -
「Delete domain security policies」のセクションまでスクロール
-
「Domain」の入力欄に以下を入力
localhost -
「Delete」ボタンをクリック
-
ページを閉じて、再度
http://localhost:3000にアクセス
これでHTTPSへのリダイレクトが解除されます。
方法2: シークレットモードを使う（一時的な対処）
HSTSの設定はシークレットモードでは適用されないため、開発中はシークレットモードでアクセスするのも有効です。
シークレットモードの開き方
-
Mac:
Cmd + Shift + N -
Windows:
Ctrl + Shift + N
シークレットモードで http://localhost:3000 にアクセスすれば、HTTPSにリダイレクトされません。
方法3: 別のブラウザを使う
Chrome以外のブラウザ（Firefox、Safariなど）を使うことでも回避できます。
特にFirefoxは開発者に人気があり、HSTSの問題も起きにくいのでおすすめです。
方法4: Railsの設定を確認（念のため）
もしRails側で強制的にHTTPSを有効にしている場合は、開発環境では無効にする必要があります。
config/environments/development.rb を確認
以下の設定がコメントアウトされているか、falseになっているかを確認
# config/environments/development.rb
# この行がコメントアウトされているか、false になっていることを確認
# config.force_ssl = true
もし config.force_ssl = true が有効になっていたら、コメントアウトするかfalseに変更してください。
config.force_ssl = false
変更後の対応
変更したら、Railsサーバーを再起動します。
# Dockerを使っている場合
docker compose restart web
# Dockerを使っていない場合
rails server
方法5: ブラウザのキャッシュを完全にクリア
HSTS 設定を削除した後、ブラウザのキャッシュも完全に
クリアしてみてください。
手順
Chrome の設定を開く：
Mac: Cmd + ,
Windows: Ctrl + ,
左側のメニューから 「プライバシーとセキュリティ」 を選択
「閲覧履歴データの削除」 をクリック
期間を 「全期間」 に設定
以下の項目にチェックを入れる：
✅ 閲覧履歴
✅ Cookie と他のサイトデータ
✅ キャッシュされた画像とファイル
「データを削除」 をクリック
Chrome を再起動
再度 chrome://net-internals/#hsts で localhost を削除
http://localhost:3000 にアクセス
まとめ
開発環境でChromeが勝手にHTTPSにリダイレクトされる問題は、HSTSの設定が原因です。
以下の方法で解決できます：
- ChromeのHSTS設定をクリア（推奨）
- シークレットモードを使う（一時的）
- 別のブラウザを使う
- Railsの設定を確認（該当する場合のみ）
最も確実なのは方法1のHSTS設定のクリアです。ぜひやってみてね