static website hosted in s3: pages return 404 after refresh

Question

With this bucket policy:

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::mypage.com/*"
        }
    ]
}

I am deploying a website that is build by reactJS v16+ (react-router-dom v5), and when I open the url, it works perfectly, e.g. from mypage.com, the that goes to /list works fine. Url is loaded as mypage.com/list and the page content is displayed.

However on any child page that is not homepage, for example mypage.com/list, once I refresh the page with browser, it returns S3's 404:

404 Not Found

    Code: NoSuchKey
    Message: The specified key does not exist.
    Key: list

I don't even know how to debug this... any idea?

Graphitize

Have you tried adding index.html(or your root html file) as error document(on Error Pages creating a custom error message and setting response code to 200). This is one of the easiest hack to get this working. – Beem

@Beem that indeed works! I am very curious to what happened and why this hack would work though, do you mind putting this as an answer and I would gladly accept it. – Graphitize

Is there an actual file called list in the root of your bucket, or when users go to mypage.com/list are you wanting them to actually see the index.html file in the /list directory? – Firebox

@JohnRotenstein no /list is not a real html page. It's a react web app so /listing is managed by the JS in the index.html page. – Graphitize

Do you have index.html as the index document? What happens if you go to mypage.com/list/ (with the final slash) but without the Error Page hack? – Firebox

The web works fine, but the console error 404 not found still there, is there any way to fix it also? – Hoyt

set response code to 200 via CloudFront. see answer https://mcmap.net/q/660064/-is-it-possible-to-customise-http-status-code-when-error-document-is-returned-in-s3-static-website-hosting – Palmetto

Answer 1

As @Panther mentioned in the comment, the right way to go is to add an error fallback to index.html in the S3 bucket's static web hosting configuration.

The reason of this is when a URL is hit (either by manual input in the browser or a refresh), it sends a request to /list to the S3's root server (the one managed by AWS) before it hits our bucket. That S3 server have no idea if this is a reactjs app or not, so it goes into the bucket to look for the /list in the root of my bucket, which doesn't exist, so it returns the 404 error.

However by adding the error fallback, now when it gets 404, it redirects the request to index.html, where the react app defined and loaded into. In this case, the /list will go through the normal flow to reach the right router that handles page rendering, problem solved.

Graphitize

I have index.html in both spots and it redirects but the 404 still shows up in the console. Is there a way to prevent this from happening? – Mulct

@StephenPhillips so you mean the page eventually shows up correctly, but the original 404 still shows up in console? – Graphitize

yep that is exactly what is happening. Is that what is supposed to happen? – Mulct

@StephenPhillips no I don't think it is normal, as I have not run into this once I fixed my 404 redirection problem. – Graphitize

@StephenPhillips maybe worth asking your own question. – Graphitize

@jamesdeath123, thanks for the explanation, Panther's suggestion works for me too – Sammysamoan

Answer 2

So, I had the same experience today, and the answer by @jamesdeath123 helped me too know the cause. In my case I am using create-react-app, so I was finding a way to generate the error.html to be used in s3 bucket. I realized though, that all I need to do is to set the error page to index.html as well.

Deirdredeism

Answer 3

Issue is your s3 bucket is not able to find error page, so you have tell it to use index.html file as for error case also.

Follow the steps below to resolve the issue

1. Go to the property of the s3 bucket.
2. Go to Static website hosting and click on edit button.
3. On the error page text field, enter your index.html file.

Then save

Boom issue is resolved.

Headmaster