3

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.com in 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 like GET https://shinhong.com/path/to/something 404 (Not Found)
  • Or type https://shinhong.com/path/to/something in 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.

shinhong
  • 406
  • 4
  • 13

1 Answers1

2

I have the same configuration: Amazon S3 + Cloudfront React app I think I solved it in Cloudfront

I changed the HTTP Responde Code from 400 to 200

enter image description here

Now If I go to https://example.com/signup, I dont have any 400 anymore

Alan
  • 9,167
  • 4
  • 52
  • 70
  • 1
    It worked for me now. But it is not the correct way of doing it. It is a workaround. Lambda@Edge or S3 bucket redirect might be a good solution but it didn't manage to get it working in the time being. If someone has better knowledge, please provide it. Thanks – Mo Zaatar Jan 19 '21 at 09:25