CloudFront Error: This XML file does not appear to have any style information associated with it

Question

I have a React app that runs on AWS S3 and CloudFront. When I access the app from the given URL it opens the home page fine. When I navigate to another page using a button on the nav bar it opens the page just fine. But if I then refresh the page I get this error:

I also get that same error if I attempt to navigate to the page via a specific path such as www.website.com/blog.

If I access the website straight from the S3 object URL everything works just fine. Pages reload and I can use direct paths to open a page. This leads me to believe the issue lies in CloudFront. However I have no idea where to start in debugging that issue.

S3 setup:

Solution

You have to set the S3 index url and S3 error url to your index page..try it

Comments

[shontauro]

The solution is go to Cloud front -> Select you cloud distribution detail -> select tab General -> Select edit -> In this form Setup the property Default Root Object to index.html

[Phil Andrews]

made an edit with my S3 settings

[Janier]

Does it work now?

[Phil Andrews]

No, that was how I originally had it setup. The S3 bucket serves everything flawlessly

[Janier]

stackoverflow.com/questions/34060394/…