CODEWITHSUNDEEP
amazon-s3angular5amazon-cloudfront
Avinash Dalvi
Avinash Dalvi

Reputation: 9301

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

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.

Upvotes: 46

Views: 22276

Answers (3)

6be709c0
6be709c0

Reputation: 8441

Here's how to do it using Terraform.

resource "aws_cloudfront_distribution" "website" {
  ...
  custom_error_response {
    error_code            = 403
    response_code         = 200
    response_page_path    = "/index.html"
    error_caching_min_ttl = 300
  }
}

Source from terraform.io
I got AccessDenied with Docusaurus, it's working well now.

Upvotes: 0

Aravind
Aravind

Reputation: 11

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';
}

Upvotes: 1

Avinash Dalvi
Avinash Dalvi

Reputation: 9301

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

enter image description here

enter image description here

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

Upvotes: 105

Related Questions