VercelでCloudflareのプロキシを使用した際のリダイレクトループ

TL;DR#

次の公式ドキュメントに書かれている内容が全てです。

https://vercel.com/guides/resolve-err-too-many-redirects-when-using-cloudflare-proxy-with-vercel

現在のブログでドメインを割り当てる際に遭遇したのと、日本語で書いているソースが見当たらなかったので書いています。そのため、この記事に新規性はありません

エラーが発生する状況#

Cloudflare プロキシを使用しているドメインを Vercel プロジェクトに割り当てると、デフォルトの設定から変更していない場合err_too_many_redirectsエラーが発生します。

エラーの原因と問題の流れ#

このエラーは、Cloudflare の SSL/TLS 設定における”Flexible”モードが原因で発生します。以下のような無限ループが発生してしまいます：

このループは以下の理由で発生します：

• Cloudflare は外部からの HTTPS リクエストを受け付ける
• しかし、バックエンド（Vercel）へは HTTP で転送する
• Vercel は HTTPS を強制するため、再度 HTTPS へリダイレクト
• この過程が無限に繰り返される

解決方法#

Cloudflare の SSL/TLS 設定をFullに変更すれば解決します。これにより、以下のような正常なフローとなります：