If you’ve ever encountered the frustrating 431 Request Header Fields Too Large error, you know how it can bring your web app or site to a halt. This error occurs when the HTTP request headers sent by your browser exceed the size limits that your server or reverse proxy allows. Headers often include cookies and metadata, so when these get too large, the server refuses the request.
What Causes Error 431?
Common reasons include:
- Too many or oversized cookies
Especially common in development when repeated logins or changing session/auth logic causes cookie buildup or oversized JWT tokens stored in cookies. - Large custom headers
Sometimes your app might send custom headers that grow unexpectedly large. - Reverse proxy limits
If you use nginx, Traefik, or similar proxies, their default header size limits may be too small for your needs.
How I Fixed It: Clearing Browser Cache and Cookies
The simplest and often overlooked fix is to clear your browser cache and cookies for your app’s domain.
Why?
Over time, your browser accumulates cookies and cached data that can become bloated—especially if you’re actively developing and testing authentication or session mechanisms. When headers contain these large cookies, your server rejects the request with a 431 error.
Step-by-Step Fix
- Clear Cookies in Chrome:
- Open Developer Tools (F12) → Application tab → Cookies
- Right-click your app domain → Clear
- Clear Cache (optional but recommended):
- In Chrome, go to Settings → Privacy and security → Clear browsing data
- Select cached images and files + cookies and other site data
- Clear
- Reload your page
After clearing, try accessing your app again. The 431 error should disappear.
Why Clearing Cache Works
- Removes outdated or oversized cookies
- Eliminates stale session tokens or JWTs causing large headers
- Forces your browser to request fresh data from the server