I have a react app deployed to Amazon S3 and distributed by Cloudfront, and it is fully working as expected right now. However, when I open the browser console, it shows a 404 error.
For example, let's say the address for my website is https://shinhong.com.
- Type
https://shinhong.comin the address bar and hit Enter: Works without errors - Now click some link on the website and navigate to
https://shinhong.com/path/to/something: Works without errors - Now refresh the current page (
https://shinhong.com/path/to/something): Works, but shows 404 error likeGET https://shinhong.com/path/to/something 404 (Not Found) - Or type
https://shinhong.com/path/to/somethingin the address bar and hit Enter: Works, but shows the same error as above
The network request with 404 error had the following response headers:
x-amz-cf-pop: ICN51-C1
x-amz-error-code: NoSuchKey
x-amz-error-detail-key: admin/logs
x-amz-error-message: The specified key does not exist.
x-cache: Error from cloudfront
but with response:
<!doctype html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8"/>
<link rel="shortcut icon" href="/favicon.ico"/>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<meta name="theme-color" content="#2c7be5"/>
<link rel="manifest" href="/manifest.json"/>
...
which is the normal public/index.html file.
I have checked this link CloudFront + S3 Website: "The specified key does not exist" when an implicit index document should be displayed, but no luck.
Also, everything is the same when I access via Cloudfront domain https://dq9*****u4da.cloudfront.net or S3 bucket domain mys3bucket.s3-website.ap-northeast-2.amazonaws.com. There is no error in my dev server btw.
Can you suggest any possible cause for this weird problem?
Thank you.
