Amplify-console: 502 ERROR The request could not be satisfied.

[agrant-intix]

I connected my Next JS app a while ago and was consistently getting an index.html not found cloudfront error.

About two weeks ago (I don't have a specific date and time) I started seeing a new error as below.

The Lambda function result failed validation: The function tried to add, delete, or change a read-only header. We can't connect to the server for this app or website at this time. There might be too much traffic or a configuration error. Try again later, or contact the app or website owner.

If you provide content to customers through CloudFront, you can find steps to troubleshoot and help prevent this error by reviewing the CloudFront documentation.

Generated by cloudfront (CloudFront)
Request ID: CXFiCqleliQeYDJs16MpL2JTGWwDfZBqkpfp6_ljIXRjmMHmaGvSoA==

[gwryssekk]

Hi @agrant-intix -- can you provide your app Id and region?

[agrant-intix]

region: ap-southeast-2
appId: d2c0j3a5mbuogw

[deboboy]

Getting same error as agrant-intix trying to deploy my Next JS app from the Amplify console.

The Lambda function result failed validation: The function tried to add, delete, or change a read-only header. We can't connect to the server for this app or website at this time. There might be too much traffic or a configuration error. Try again later, or contact the app or website owner.
If you provide content to customers through CloudFront, you can find steps to troubleshoot and help prevent this error by reviewing the CloudFront documentation.
Generated by cloudfront (CloudFront)
Request ID: jXie0UlDadx2Nj-ujBDBIsIF5UwPSDYTVvMrLYRHo9dZKWfgpYS5PA==

[Hayden-Neilson]

I have the same error with my react app when deploying with amplify too. This has been my issue for the last couple days it was fine on tuesday but then it started happening wednesday for me.

502 ERROR

The request could not be satisfied.

The Lambda function result failed validation: The function tried to add, delete, or change a read-only header. We can't connect to the server for this app or website at this time. There might be too much traffic or a configuration error. Try again later, or contact the app or website owner.
If you provide content to customers through CloudFront, you can find steps to troubleshoot and help prevent this error by reviewing the CloudFront documentation.
Generated by cloudfront (CloudFront)

[SuddalaSurajachary]

I am facing the same issue with my Vue JS application when deploying with amplify. This is the case from last 6 days since i set it up for the first time.

502 ERROR

The request could not be satisfied.

The Lambda function result failed validation: The function tried to add, delete, or change a read-only header. We can't connect to the server for this app or website at this time. There might be too much traffic or a configuration error. Try again later, or contact the app or website owner.
If you provide content to customers through CloudFront, you can find steps to troubleshoot and help prevent this error by reviewing the CloudFront documentation.
Generated by cloudfront (CloudFront)
Request ID: maE4pJa_dMVT_StrQYspYPoBDSs4Vsmb4MUdDe9rBedepdYXS08k9Q==

[johanlantz]

Same here, pushed an existing react app (frontend only) to amplify and got this error.
Edit: This was due to an incorrect baseDirectory in the build settings. The app used dist instead of build. When setting up a new Amplify project I noticed that the wizard did have a warning sign telling me to check my build directory path so in my case it was not an amplify problem.

[jasona7]

Also experiencing this issue. Get the error below after pushing a Vue.js SPA with redirect type 404 (Rewrite)

502 ERROR
The request could not be satisfied.
The Lambda function result failed validation: The function tried to add, delete, or change a read-only header. We can't connect to the server for this app or website at this time. There might be too much traffic or a configuration error. Try again later, or contact the app or website owner.
If you provide content to customers through CloudFront, you can find steps to troubleshoot and help prevent this error by reviewing the CloudFront documentation.

Generated by cloudfront (CloudFront)
Request ID: 8z9bEBtT4EdEpUwW4VGssatN0FEnXxPtasGUfsnE0ZUfegzw2n1aRg==`

[bvirlet]

Same issue on our apps as well.

Generated by cloudfront (CloudFront)
Request ID: 2FJCpsdZXrf3FBrGJg2tHpEYFCj-FlvBJ-8hsyabGXUQ5qmldCXypQ==

[evanlarkin10]

I am having the same issue

[stephensander1161]

me too, just trying to get my little app on amplify

Generated by cloudfront (CloudFront)
Request ID: d2u8bOwtRrnLEvsXSVieZSzhIH1KmizsGpYCCu2O-P8mzVLIdHOXHQ==

[pendurthi05]

me too getting same error message.
502 ERROR
The request could not be satisfied.
The Lambda function result failed validation: The function tried to add, delete, or change a read-only header. We can't connect to the server for this app or website at this time. There might be too much traffic or a configuration error. Try again later, or contact the app or website owner.
If you provide content to customers through CloudFront, you can find steps to troubleshoot and help prevent this error by reviewing the CloudFront documentation.
Generated by cloudfront (CloudFront)
Request ID: YG3O7igxJr2pY7MqzBSep3H2GNZmg5fvvsFfiwVoEPqnvcA7OapLDQ==

[roykingtree]

I had this same issue, but solved it by fixing my build settings on the amplify console (editing the amplify.yml file in console). You need to make sure your build command is included and your baseDirectory is correct. Here is an example of what the yml file should look like, though your specific build commands and baseDirectory location may differ: https://gridsome.org/docs/deploy-to-amplify/

[drptbl]

When it comes to next.js - actually, it seems that npm run build should also include next export command and that is the issue.

If your npm run build has only next build, it's not enough.
You have to make npm run build to be next build && next export.
Also remember that next export output destination is out, so you have to change your baseDirectory to out in this case (not .next).

[bvirlet]

Hello @aws-amplify-ops,

We've been having this problem for quite some time now. Is there some ETA on a fix?

Thanks!
Bruno

[roldanreno]

Hi

I'm still having this issue. Is there any workaround?

[bvirlet]

I found that we had the issue because we had a 404 Rewrite instead of a 404 Redirect:

Are 404 Rewrite brokens?

[husain3]

I had this issue as well, but what I noticed was when I was trying to build a new project it was looking for my source code one folder above where my project was located.

Amplify looking at: 'swagger-webpage/'

My actual code located at: 'swagger-webpage/swagger-webpage/'

The reason why my code was located there was because I created a repo called 'swagger-webpage' and generated a react app called 'swagger-webpage', and commited the folder to the repo. Thus, 'swagger-webpage/swagger-webpage/'.

SOLUTION:
I just moved the react js contents one folder up, i.e. 'swagger-webpage/', pushed the changes to my repo, and created a new connection from my app to amplify (using the default autogenerated build settings). All was working afterwards.