Get AccessDenied when trying to access a page with full url on my website
For a while, I just kept my website content in an s3 bucket and was able to access all pages through the full url. I wanted to make my site more secure by adding SSL, so I created a CloudFront Distribution to point to my s3 file.
The site will load just fine, but if the user tries to refresh the page or tries to access the page using the full url (like www.example.com/home) they will get the AccessDenied page.
I have a policy in my s3 billing that restricts access to the original login id only, and index.html is set as my domain root object.
I don't understand what is missing.
For a demo, feel free to visit my site .
You will notice how it redirects you to kurtking.me/home. To reproduce the error, try refreshing the page or accessing the page with the full url (i.e. Kurtking.me/life)
Any help is greatly appreciated as I am trying to wrap my head around this and find answers for days.
source to share
I figured it out and wanted to post my solution in case anyone else comes across this issue.
The problem was that Angular was a SPA (Single Page Application) and I was using an S3 bucket to store it. When you try to navigate to a specific page via URL access, CloudFront will take (e.g. / about) and navigate to your S3 bucket looking for that file. Since Angular is a SPA, this file doesn't technically exist in your S3 bucket. This is why I got the error.
What I needed to do to fix it
If you open your distribution in Cloudfront, you will see the Error Pages tab. I had to add two "custom error responses" that handled 400 and 403. The details are the same for 400 and 403, so I only include a photo for 400. See below:
Basically what happens is you tell Cloudfront to redirect back to index.html regardless of error 400 or 403, thereby giving control to Angular to decide if it can go the way or not. If you want the client to serve a 400 or 403 error, you need to define those routes in Angular.
After setting up two custom error responses, I deployed my cloud and Wallah solutions, it worked!
I used the following article to help me solve this issue.
source to share