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?

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. — Panther, May 28 '19 at 15:39
@Panther 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. — jamesdeath123, May 28 '19 at 15:47
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? — John Rotenstein, May 29 '19 at 03:13
@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. — jamesdeath123, May 29 '19 at 14:29
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? — John Rotenstein, May 29 '19 at 23:37
The web works fine, but the console error 404 not found still there, is there any way to fix it also? — vicnoob, Jan 08 '21 at 03:51

score 18 · Accepted Answer · answered May 29 '19 at 14:34

18

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.

answered May 29 '19 at 14:34

jamesdeath123

4,268
11
52
93

3

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? – Stephen Phillips Sep 05 '19 at 02:49
2

@StephenPhillips so you mean the page eventually shows up correctly, but the original 404 still shows up in console? – jamesdeath123 Sep 05 '19 at 18:30
yep that is exactly what is happening. Is that what is supposed to happen? – Stephen Phillips Sep 09 '19 at 19:13
@StephenPhillips no I don't think it is normal, as I have not run into this once I fixed my 404 redirection problem. – jamesdeath123 Sep 13 '19 at 15:56
@StephenPhillips maybe worth asking your own question. – jamesdeath123 Sep 13 '19 at 15:57
@jamesdeath123, thanks for the explanation, Panther's suggestion works for me too – Jemil Oyebisi Jun 14 '20 at 19:10

score 10 · Answer 2 · answered Apr 27 '20 at 10:17

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.

static website hosted in s3: pages return 404 after refresh

2 Answers2

Linked