Angular application hosted on AWS redirection gives access denied having cloudfront ahead of S3

Question

We have one angular application, which is pushed into AWS S3 bucket. We have cloundfront ahead of S3 and then uses Route53 for DNS changes. Lets say my application is usable with mywebsite.abc.xyz when hitting that on browser it is changed to mywebsite.abc.xyz/sigin . Now if I refresh this with address as mywebsite.abc.xyz/sigin then it gives access denied error. But if I hit mywebsite.abc.xyz/#/sigin then it works fine.

To remove the # I followed the https://zanon.io/posts/angularjs-with-pretty-urls-removing-the-in-amazon-s3 , and in the S3 bucket website hosting I made changes as below: In the redirection rules I put the code as below

 <RoutingRules>
  <RoutingRule>
    <Condition>
      <HttpErrorCodeReturnedEquals>403</HttpErrorCodeReturnedEquals>
    </Condition>
    <Redirect>
      <HostName>mywebsite.abc.xyz</HostName>
      <ReplaceKeyPrefixWith>#/</ReplaceKeyPrefixWith>
    </Redirect>
  </RoutingRule>
</RoutingRules>

But after following the steps above with changes in angular application, I was still getting the error, then later I made the S3 bucket public following https://aws.amazon.com/premiumsupport/knowledge-center/s3-website-cloudfront-error-403/ and add in the bucket policy as below

{
    "Version": "2008-10-17",
    "Id": "PolicyForCloudFrontPrivateContent",
    "Statement": [
        {
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::mywebsite/*"
        },
        {
            "Sid": "2",
            "Effect": "Allow",
            "Principal": {
                "AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity E34ZE2PYIHAABG"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::mywebsite/*"
        }
    ]
}

But still the same error. I am not sure how to solve this. The expected result is even if I hit mywebsite.abc.xyz/signin/ then also it should work, whereas it works with mywebsite.abc.xyz/#/signin

Answer 1

You need to add custom error pages to your CF Distribution.

Go to your distribution, Error Pages -> Create Custom Error Response .

Add custom rules for both 403 and 404 that have Response Page Path set to index.html and an HTTP Response Code of 200 . Save it.

It should look like this:

There is no need to make the bucket public, rely on the Policy CF generated for your.

The reason why this work is that when CF tries to access the origin and gets an 404 or 403 response it will server whatever it has from index.html .

Also, there is no need to configure your bucket to be serve a static website, a normal bucket is enough for this.