How to setup CloudFront to have a custom error page per origin

I had same problem and solved as follows:

• Configure the S3 bucket to have 'Static website hosting' and set index.html as the 'Error document'.
• Change the CloudFront origin to be a 'Custom Origin' pointing to the S3 static website endpoint rather than an 'S3 Origin' pointing directly at the S3 bucket.
• The 'Error Pages' config can then be removed from the CloudFront distribution.

You can create Lambda Function Association of Event type Origin response to modify the status code and body content. You will want to add this in the CloudFront behaviors used for your front-end app. Here is the example.

You can add 302 header and redirect to a location (cache behavior) for static error page or you can attach content to response.body and change status code to 200.

More on Lambda@Edge