Angular on S3, refresh causes "AccessDenied" response

Question

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?

Answer 1

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