Hosting through Cloudfront provides 403

My question is about having AWS Cloudfront, a namecheap dns and an S3 bucket.

TLDR: When I try to access my website through my namecheap DNS, it throws a 403 ERROR with the message 'Bad request. We can't connect to the server for this app or website at this time' in my browser. However, when I access my website through the DNS provided by Cloudfront it works fine.

I have the following setup:

1. Namecheap domain name with a CNAME pointing to the AWS Cloudfront Distribution domain name
2. Cloudfront points to an S3 bucket that is hosting a static website (Bucket website endpoint)
3. There are two custom error responses that map 400 and 403 to a 200 OK and the /index.html
4. The bucket is set to 'public access', Block access is off I have the following policy on it as well:

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::cryptocopytradeprod/*"
        }
    ]
}

Everything works fine when I open the website from the bucket endpoint or the Distribution domain name from Cloudfront. However when I open the website from the Namecheap DNS it throws a 403. I have no idea why...

can you please go through this?

https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/private-content-restricting-access-to-s3.html

Also, we do not need to keep the bucket public when we use origin access control (OAC) and origin access identity (OAI).

Also, you need to define Alternate domain names in CloudFront and use CloudFront Distributions Domain name as CName in NameCheap or even you can configure Cloudflare DNS for the same.