RequestHeaderSectionTooLarge: Your request header section exceeds the maximum allowed size

Viewed 1676

We are using AWS Amplify for our NextJS web app and keep receiving error when ever I try to load the application once deployed to Amplify. Locally there is no issue.

enter image description here

I am using Amplify's default Auth configuration, with basic email and password auth. It looks like it could be related to the Amplify cookie being set in the header but I cannot find any documentation within AWS to prevent this or reduce the amount of information passed with the header. Any help would be appreciated.

3 Answers

I have faced the same issue and was able to solve it. Here's how -

  1. Identify the CloudFront Distribution ID for your app. You can find it Deploy logs of your app build console.

AWS Amplify Build Console

  1. Search & open that particular CF Distribution and goto the Behaviours tab.

  2. Select the Default behaviour (5th one in my case) and hit Edit.

Cloudfront Distribution Console > Behaviours Tab

  1. Scroll down to the Cache key and origin requests section. Here you will find settings to control what's included in the headers of the request that goes to the server. In my case, I didn't need any Cookies so I chose None, and it solved the issue for me. In your case, you can do the same or pick what all info needs to be the headers.

Cloudfront Distribution Console > Behaviours Tab Edit

Check to see if there are any unnecessary cookies for that domain.

I was getting this error (on a site I don't own). I took a look at the request headers and found a very large number of cookies (several dozen) for the site's domain. I cleaned up the cookies which seemed non-critical and the error went away.

As the error implies, the size of the entire request header section is above 8192 bytes. Request headers include the accept headers, the user agent, the cookies, etc. and all combined can get rather large. Large headers look malicious to some WAFs. I once had a single user having trouble with our site. Turns out they were a polyglot and had configured their browser to accept several dozen languages causing their accept-language header to be suspiciously long, and the WAF refused to proxy the request.

I faced the same issue using Nextjs, amplify and an external Auth provider.

The problem is that AWS S3 service has a request header maximum allowed size of 8192 bytes, so when ever you try to access the static generated pages of Nextjs it returns that error. This has already been asked here

In my case, I was using an external Auth provider and I was able to solve the issue configuring the cookies only for the '/api/' path. That way the Auth cookies are sent only to the Nextjs api endpoints, so your request header is lighter whenever you try to get the static pages.

Related