How to Fix 403 Error on CloudFront Distribution

(image of the error)

Introduction

CloudFront is a popular content delivery network (CDN) that is widely used by developers to improve the performance and speed of their websites. However, if you are using CloudFront to serve your S3 website over a custom domain, you might encounter a 403 error. This error occurs because CloudFront does not recognize your custom domain name. In this blog post, we will discuss how to fix the 403 error on CloudFront distribution.

Adding Alternate Domain Names (CNAMEs)

The solution to fixing the 403 error on CloudFront distribution is to add your custom domain name to the "Alternate Domain Names (CNAMEs)" field in the AWS CloudFront Distribution. This tells CloudFront that your custom domain name is a valid alias for your CloudFront distribution.

To add your custom domain name, go to your AWS Management Console and navigate to the CloudFront distribution that serves your S3 website. Click on the "Edit" button and scroll down to the "Alternate Domain Names (CNAMEs)" field. Enter your custom domain name in this field and save your changes.

(Adding your custom domain name to the "Alternate Domain Names (CNAMEs)" field)

But that's not all

But what's also important to mention is that if you are serving your website under a subdomain like app.domain.xyz you need to make a CNAME record to your cloudfround distribution URL (Don't forget to add a CNAME record to your custom domain name on your domain provider)

Be patient with the solution

It is important to note that it may take some time for the changes to propagate across the internet. Therefore, if you still encounter the 403 error after adding your custom domain name, wait for some time and try again.

Conclusion

If you are using CloudFront to serve your S3 website over a custom domain and are encountering a 403 error, the solution is to add your custom domain name to the "Alternate Domain Names (CNAMEs)" field in the AWS CloudFront Distribution. This will tell CloudFront that your custom domain name is a valid alias for your CloudFront distribution. By following the steps outlined in this blog post, you should be able to fix the 403 error and serve your S3 website over a custom domain without any issues.