AWS S3 Deployment with CloudFront Error (This XML file does not appear to have any style information associated with it)

user_13812691 0
Viewed 3246

I am trying to deploy my app with AWS S3 and CloudFront. I have set all my S3 permissions to public. However I keep get this error when I load up the browser: ErrorPage

This XML file does not appear to have any style information associated with it. The document tree is shown below.

<Error>
  <Code>AccessDenied</Code>
  <Message>Access Denied</Message>
  <RequestId>6904C81A14C40727</RequestId>
  <HostId>q2gu5sW67rAC6vVoBuOcdF7R5ifSKyRO+4APYpIOt/A+qSESs2vnkp/xYFi2VGzoX6v8Z3EAn8k=</HostId>
</Error>

I am deploying this with Github actions. Where is the error possibly coming from? Is it from my config files or my CloudFront or S3 settings?

amazon-cloudfront amazon-s3
3 Answers

This is due to the Cloudfront error on "Default Root Object" setting. There is a "Default Root Object" setting in the "General" settings of cloudfront.If this is not set, then this error occurs.

Even if you have set an "index document" for S3 on the backend, you need to set it again for cloudfront. Goto your cloudfront distribution and add 'index.html' in general setting of "Default Root Object" box.

enter image description here

user_46810980

This error is from S3 because of permission issues. From the screen shot, you don't have favivon.ico in the bucket and / will basically list the bucket, you may want to define the default root document in the CloudFront.

Default root document

user_110973680

try changing the ... by

window.open("...Link", "_self/_blank")

it worked for me in aws s3bucket. also changed the

import {
  BrowserRouter as Router,
} from 'react-router-dom';
user_142521620
Related