Receive AccessDenied when trying to access a reload or refresh or one in new tab in angular 5

Question

For a while, I was simply storing the contents of my website in a s3 bucket and could access all pages via the full url just fine. I wanted to make my website more secure by adding an SSL so I created a CloudFront Distribution to point to my s3 bucket.

The site will load just fine, but if the user tries to refresh the page or if they try to access a page using the full url (i.e., www.example.com/home), they will receive an AccessDenied page.

Rrhoea

stackoverflow.com/help/someone-answers help them following this. if think question is useful not only answer. – Rrhoea

See #16267839 – Swatter

@Swatter this was only to set error page. Actually issue for SPA to understand path routing using CloudFront. – Rrhoea

Answer 1

S3 doesn't understand route open when you reload and open in new tab. You need to tell S3 is for this route used index.html.Whenever new route open its gives 403 [access denied ] error. for this you need to do setting CloudFront to set 403 error page redirect to index.html

Go to aws cloud front and open your configuration then go to Error page tab you will see same as above screenshot

Here is details blog : https://www.internetkatta.com/host-angular-2-or-4-or-5-version-in-aws-s3-using-cloudfront

Rrhoea

Can you please explain how to set it? – Deplete

1. Go to aws cloud front and open your configuration then go to Error page tab you will see same as above screenshot – Rrhoea

Life savior, If someone could explain why this really happens. – Guadalcanal

Routing does not manager or understand by S3. Website hosting. It’s directly work like folded and index.html file. To make it happen we have to configure rule to access always index.html – Rrhoea

Don't forget to upvote on question too which you help. – Rrhoea

Nice answer. This seems like a workaround, though. If I want to access mydomain/myroute I will be redirected to mydomain/index.html. Is there a way to make mydomain/myroute actually return myroute? – Dubuffet

It will actually return ur route only. Url doesn’t show /index.html. – Rrhoea

This one helped me. But question arises and people ask that, is this the correct way to fix this problem @aviboy2006? – Viewable

Yes. this is correct way to fix. This is feature of CloudFront to handle URL routing for static hosting. – Rrhoea

Important note: using error pages to solve a routing problem, you cannot manipulate CSP and other security headers. – Huckster

Answer 2

You can use cloudfront functions to rewrite SPA route requests to /index.html without changing the browser's URL, ensuring SPA paths are handled by your application's client-side routing.

// Determine if the URI looks like a file by checking for a period '.' var looksLikeFile = uri.includes('.');

// If the URI does not look like a file (indicating an SPA route), rewrite to '/index.html'
if (!looksLikeFile) {
    uri = '/index.html';
}

Graz