5

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?

DigitalMC
  • 805
  • 2
  • 16
  • 31
  • 1
    Did you [point](https://stackoverflow.com/questions/51218979/react-router-doesnt-work-in-aws-s3-bucket) the 'Error document' in S3 bucket static website hosting to index.html? – jarmod Nov 13 '20 at 20:44
  • So oddly enough even if I do that it does not work. Now if I use the Amazon URL for the bucket it works (Bypassing the CDN) http://website.s3-website-us-east-1.amazonaws.com/auth/login ... but If i go through the CDN it breaks as mentioned above – DigitalMC Nov 13 '20 at 21:37
  • 1
    https://stackoverflow.com/questions/50299204/receive-accessdenied-when-trying-to-access-a-reload-or-refresh-or-one-in-new-tab/50302276#50302276 try this you have to setup custom error page in Cloudfront. https://www.internetkatta.com/host-angular-2-or-4-or-5-version-in-aws-s3-using-cloudfront – Avinash Dalvi Nov 14 '20 at 03:45
  • 1
    above link will solve your issue. @DigitalMC – Avinash Dalvi Nov 14 '20 at 03:46
  • Don’t forget upvote question and answer. Thanks good to know it’s help you. – Avinash Dalvi Nov 18 '20 at 15:05
  • I have already given its solution. Please refer https://stackoverflow.com/questions/51218979/react-router-doesnt-work-in-aws-s3-bucket/71591815#71591815 – Kaushal Sachan Mar 23 '22 at 17:51

1 Answers1

4

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

DigitalMC
  • 805
  • 2
  • 16
  • 31