Search code examples
amazon-web-servicesamazon-s3amazon-cloudfront

AWS S3 Bucket - Access Denied on Sub-Pages

So I have an AWS S3 Bucket hosting the files for a react application I've built. I use CodePipeline to build and compile the React app and store the files on an S3 bucket which is served through a CloudFront CDN.

Everything seems to be working fine when I access the url from the root https://website.com. When I click "login" on that page I get directed to the following route https://website.com/auth/login and it works awesome.

The Problem If I try to access the page https://website.com/auth/login directly I get the following error:

<Error>
  <Code>AccessDenied</Code>
  <Message>Access Denied</Message>
  <RequestId>66CE67E2E5DA0B7B</RequestId>
  <HostId>Spfhgnlygx05eugycEy5ew4e8oSn/ccNX21Iy/6qaAxI8glXljDjgKmUPvMzRd8+NktQsNietpg=</HostId>
</Error>

I set the default resource in the cloudfront CDN to the /index.html which is why the root domain works, but how do I get all there urls to point to /index.html so the app routes it properly?

Solution

  • I needed to set a rule for 403 Forbidden in my cloudfront configuration as posted here: Receive AccessDenied when trying to access a reload or refresh or one in new tab in angular 5