Vue Site Running in S3 returning 404 but still loading

Question

I have a site running in Vue2 and for the user everything seems to work right, however google doesn't seem to agree and shows most of my site as having 404 errors. I verified that when using a direct url on the site for example:

hptts://example.com/example

The page will load fine in the browser, but the console will immediately report a 404, but then load the content normally.

This means that lighthouse and google search console all show my page as a 404.

The site is hosted in AWS S3 as a static site, and I have index.html as the entry point and as the error location. I have user facing errors coming from Vue Router that work fine.

Any thoughts on what could be causing the 404 in the console and how to resolve it?

A real world example of this is https://lattecalories.com/brewing/starbucks-holiday-flavors-a-guide-for-2021

The trouble is with a Site being static. SSR would make the error go away. — Adam Orłowski, Jan 22 '22 at 22:36
@adam-orłowski Yes. SSR would resolve this, however it would require a server which is something I would prefer to avoid. — June Lewis, Jan 23 '22 at 01:15

score 1 · Answer 1 · answered Jan 29 '22 at 18:17

The HTTP 404 is the status code from the server itself saying that the URL is unknown, the thing is, when you have services nested into other ones such as S3, Cloudflare, and other APIs, you might end up having a perfectly good website with a 404 on top.

From a quick trace on your side, I seem to have found what is triggering this inside Amazon.

Look at this output:

HTTP/1.1 404
date: Sat, 29 Jan 2022 17:49:30 GMT
content-type: text/html
display: staticcontent_sol
expires: Fri, 28 Jan 2022 17:49:30 GMT
last-modified: Sat, 29 Jan 2022 13:07:11 GMT
pagespeed: off
response: 404
vary: Accept-Encoding
vary: "X-Clacks-Overhead":"GNU,Terry,Pratchett",User-Agent,Origin,Accept-Encoding
x-amz-error-code: NoSuchKey
x-amz-error-detail-key: brewing/starbucks-holiday-flavors-a-guide-for-2021
x-amz-error-message: The specified key does not exist.
x-amz-id-2: NnQCklbWF34u0C188TUsd6FrlA7IHcfjh3lSNqU7eX6MLSKG5yxM/9AsgeAlaCqCZFrPzOs7JNk=
x-amz-request-id: AYR2Z1Q5H45D1B6V
x-ezoic-cdn: Miss
x-middleton-display: staticcontent_sol
x-middleton-response: 404
x-origin-cache-control: 
x-sol: pub_site
cf-cache-status: DYNAMIC
expect-ct: max-age=604800, report-uri="https://report-uri.cloudflare.com/cdn-cgi/beacon/expect-ct"
report-to: {"endpoints":[{"url":"https:\/\/a.nel.cloudflare.com\/report\/v3?s=CWwatL5unsl0K3Tt8iy4Sv3b6zcy54UMMaruLGh5hVyFcbMi2qEo13mxbofVr5JTkOOM2HGwFvWweklpm2inUMS279wCx0uJhKzfqR16JU%2BpIXZSrqR3YNGXjr%2FWxc%2BnLpgCmVn1ZJAc5zxYVWmSBg%3D%3D"}],"group":"cf-nel","max_age":604800}
nel: {"success_fraction":0,"report_to":"cf-nel","max_age":604800}
server: cloudflare
cf-ray: 6d544c288d2dec19-ATL
content-encoding: gzip
alt-svc: h3=":443"; ma=86400, h3-29=":443"; ma=86400

Those NoSuchKey, I also notice that when I try to hit that site on an invalid URL the site still loads instead of your 404 page, this means the distribution method is wrong and you might not be pointing correctly to the S3 URLs.

I would just create a new download distribution to your S3 URLs, that would fix this, this is a mapping issue. When you are running this on defaults this is pretty common.

score 0 · Answer 2 · answered Jun 30 '22 at 18:55

Check out this answer here: "The specified key does not exist" for VueJS app deployed on deployed on S3 with CloudFront

Based on the answer by @Kram, this error information is highly relevant (I'm getting the same error in my site):

x-amz-error-code: NoSuchKey
x-amz-error-detail-key: brewing/starbucks-holiday-flavors-a-guide-for-2021
x-amz-error-message: The specified key does not exist.

It may fix it if you change CloudFront to respond with 200 OK (as described in the above URL).

The nature of the error is that S3 is trying to load the URL domain.com/brewing/starbucks-holiday-flavors-a-guide-for-2021 but that location doesnt exist in the bucket.

The fix is to redirect to /index.html to allow vue-router to resolve the URL.

I'm currently suffering this error in my Vue3 application in S3, but we aren't using CloudFront. I added the error page as index.html but it didn't fix the error. The website loads properly but it throws a 404 into the console everytime you reload the page. We're going to simply ignore the error for now and we will add CloudFront later. It's just a dev environment for now.

Vue Site Running in S3 returning 404 but still loading

2 Answers2