Direct Access to Specific Page Redirecting to Home Page

I have a static Gatsby website hosted on S3 + Cloudfront. The site is working fine with custom error responses with path set to /index.html for error code 403

But when I try to manually enter a specific page path exmaple.com/path1 in the browser tab and hit enter, it redirects me to the home example.com page.

Why is that? Is there any solution for this?

My s3 permission policy:

{
    "Version": "2008-10-17",
    "Id": "PolicyForCloudFrontPrivateContent",
    "Statement": [
        {
            "Sid": "AllowCloudFrontServicePrincipal",
            "Effect": "Allow",
            "Principal": {
                "Service": "cloudfront.amazonaws.com"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::example.com/*",
            "Condition": {
                "StringEquals": {
                    "AWS:SourceArn": "arn:aws:cloudfront::111111111111:distribution/f6666666"
                }
            }
        }
    ]
}

Solution

I don't know much about Gatsby but I'm guessing that it's generated a structure like this which you've deployed to your S3 bucket?

/index.html
/path1/index.html
...etc

And you want GET / to return the content from index.html, and GET /path1 to return the content from /path1/index.html etc.? And your plan to do this was to set /index.html as the 403 custom error response?

If I've understood that correctly, then this isn't going to work as you want. If you've set things up as described I would expect GET /path1 to return the content from /index.html.

One way of getting this working as you want is to change the 403 custom error response to something more appropriate (i.e. a /404.html page) and then associate a viewer-request function with your CloudFront distribution that rewrites requests to include /index.html at the end of the path if needed. Something like:

function handler(event) {
  var request = event.request;
  var uri = request.uri;

  if (uri.endsWith("/")) {
    request.uri += "index.html";
  } else if (!uri.includes(".")) {
    request.uri += "/index.html";
  }
  return request;
}

Here's a CloudFormation template where this is set up if you want to see how it all fits together (disclaimer: this is my github repo).