AWS Cloud Front S3 Access Denied error only when going to myURL.com/(anything)

Question

When I go to myUrl.ca it works perfectly fine, but when I go to myURL.ca/(anything) it gives me an access denied error. I am using AWS s3 to host a react project and have connected it to cloud front to allow for https traffic.

Error:

<?xml version="1.0" encoding="UTF-8"?>
<Error>
<Code>AccessDenied</Code>
<Message>Access Denied</Message>
<RequestId>3697C7E66D56C891</RequestId>
</Error>

Answer 1

Solution Found: https://serverfault.com/questions/581268/amazon-cloudfront-with-s3-access-denied

"I've just had the same issue and while Kousha's answer does solve the problem for index.html in the root path, my problem was also with sub-directories as I used those combined with index.html to get "pretty urls" (example.com/something/ rather than "ugly" example.com/something.html)

Partially it's Amazon's fault as well, because when you set up CloudFront distribution, it will offer you S3 buckets to choose from, but if you do choose one of those it will use the bucket URL rather than static website hosting URL as a backend.

So to fix the issue:

Enable static website hosting for the bucket
Set the Index (and perhaps Error) document appropriately
Copy Endpoint URL - you can find it next to the above settings - It should look something like: <bucket.name>.s3-website-<aws-region>.amazonaws.com
Use that URL as your CloudFront Distribution origin. (This will also make the CF Default Root Object setting unnecessary, but doesn't hurt to set it anyway)"