出现 CloudFront 错误的 AWS S3 部署（此 XML 文件似乎没有任何关联的样式信息）答案

【问题标题】：AWS S3 Deployment with CloudFront Error (This XML file does not appear to have any style information associated with it)出现 CloudFront 错误的 AWS S3 部署（此 XML 文件似乎没有任何关联的样式信息）
【发布时间】：2022-01-31 19:47:31
【问题描述】：

我正在尝试使用 AWS S3 和 CloudFront 部署我的应用程序。我已将所有 S3 权限设置为公开。但是，当我加载浏览器时，我一直收到此错误：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>

我正在使用 Github 操作部署它。错误可能来自哪里？是来自我的配置文件还是 CloudFront 或 S3 设置？

【问题讨论】：

标签： amazon-s3 amazon-cloudfront

【解决方案1】：

由于权限问题，此错误来自 S3。从屏幕截图来看，您的存储桶中没有 favivon.ico 并且 / 基本上会列出该存储桶，您可能需要在 CloudFront 中定义默认的根文档。

Default root document

【讨论】：

【解决方案2】：

尝试改变 ...

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

它在 aws s3bucket 中为我工作。也改了

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

【讨论】：

【解决方案3】：

这是由于“默认根对象”设置中的 Cloudfront 错误。 cloudfront的“General”设置中有一个“Default Root Object”设置，如果没有设置，就会出现这个错误。

即使您在后端为 S3 设置了“索引文档”，您也需要为 cloudfront 再次设置它。转到您的云端分发并在“默认根对象”框的常规设置中添加“index.html”。

【讨论】：