CODEWITHSUNDEEP
angulardeploymentamazon-cloudfront
Luis Cabrero
Luis Cabrero

Reputation: 73

How to fix AccessDenied error CloudFront Angular deployed application?

I'm setting up an Angular application deployed on S3 and handled by CloudFront distribution. When I visit the application, it works normally but if I reload the page, then I get following error:

<Error>
<Code>AccessDenied</Code>
<Message>Access Denied</Message>
<RequestId>E716BA4DFD8C1B54</RequestId>
<HostId>
0EcNthjt/zlsAZxEx8JncShstTBNxFram3F6Jy2uI0LD+am1l+7YxGAbZ1dVphkuhZj32mnkjug=
</HostId>
</Error>

I've setup CloudFront distribution with all needed fields following this tutorial:

Deploy an angular spa as a static website

I've placed index.html as Default Root Object and I've placed it under index document option at S3 bucket.

With that setup it should work and use angular's index.html when you reload page, but Im getting that AccessDenied error.

Upvotes: 3

Views: 6414

Answers (1)

Luis Cabrero
Luis Cabrero

Reputation: 73

Okay guys, I've just discovered the problem, from the same article:

Deploy an angular spa as a static website

Its really important to notice that:

Important: Origin Domain Name will provide you with the drop down of S3 bucket. You shouldn’t use that. As it omitted the S3’s region and it will cause the request to redirect instead of passing through the traffic through CloudFront. (May be there is a better way to configure this I’m not sure.) So just copy-and-paste your S3 URL here. .s3-.amazonaws.com .

Make sure you place as Origin Domain Name your bucket with following URL structure:

<bucket-name>.s3-website-<bucket-region>.amazonaws.com

Don't use suggested bucket URL structure because it won't work. Hope this helps on future.

Upvotes: 2

Related Questions