問題

local環境にて開発中に431エラーが発生。localhost:3000に接続ができなくなった。
開発サーバーは問題なく起動している。
コンソールを確認すると以下のメッセージ。
ERR_ABORTED 431 (Request Header Fields Too Large)

原因

メッセージからわかるように、リクエストヘッダーが大きすぎることが原因でlocalhostが開けなくなっていた。
初回アクセス時にヘッダーに含めてサーバーに送信するCookieのデータ量が、サーバーで受け付けているリクエストヘッダーの容量より大きすぎることが原因だった。
この時は、複数アプリケーションを同じlocalhost:3000で起動しており、同じオリジンに複数ユーザーのセッション情報をcookieに保持していたため、localhostアクセス時のリクエストヘッダーの制限を超えてしまっていた。
なお、node v14以上のデフォルトのリクエストヘッダーサイズは16kbに設定されている様子。
一つのセッション情報あたりで合計5kb程度あったので、3つ、4つ程度のセッション情報がcookieに保持されていたためか、16kbを超えてしまっていた様子。
https://tutorial.tips/what-is-the-max-http-header-size-in-nodejs-server/

解決策

不要なcookieを削除。余計なcookieが保持されないようにソースを見直す。

課題

ローカル環境ではnodeサーバを使っているから、nodeのrequestHeaderサイズ制限を拡張するコマンドをローカル環境起動時のscriptに入れれば解決しそうだと思ったが、CRAではどうやらうまくできな様子。(以下参照）
https://github.com/facebook/create-react-app/issues/6582
基本ないとは思うが、ざっくり現状の2.5倍の量のcookieのが保存されることになると、リクエスト時容量オーバーになって431エラーが出ちゃうかも。