CODEWITHSUNDEEP
reactjsamazon-s3amazon-cloudfront
shinhong
shinhong

Reputation: 446

Amazon S3 + Cloudfront React app fully working but with 404 error

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.

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.

Upvotes: 3

Views: 2760

Answers (1)

Alan
Alan

Reputation: 10145

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

Upvotes: 2

Related Questions