Angular on S3, refresh causes "AccessDenied" response

Viewed 3977

I have an angular 5 app - that I've been running locally, had it running with a nodjs server on heroku fine, but when I put it in an S3 bucket, behind cloudfront and i hit refresh I get this.

This XML file does not appear to have any style information associated with it. The document tree is shown below.
<Error>
<Code>AccessDenied</Code>
<Message>Access Denied</Message>
<RequestId>217...1C</RequestId>
<HostId>
yu2de...dr0=
</HostId>
</Error>

Any suggestions?

2 Answers

You need to configure Cloudfront to handle the routing, so that all routes get redirected to index.html

Take a look at this for more info

If you are doing a simple HTML S3 site for testing in DEV and using the default assigned domain (not using cloudfront), set error page to the same as your start page (index.html). Then when the page is refreshed, it reloads with the same route, just like a traditional website that is not a SPA.

Related