使用 AWS S3 + CloudFront 部署时反应 SPA 空白页

Question

我将 React Single Page App 上传到使用 CloudFront 服务的 AWS S3。 我有两个存储桶和两个 CDN（一个公共和一个私有），并且在“私有”CDN 上使用签名的 cookies 限制查看器访问。 从“公共”存储桶/CDN 重定向后，我的页面加载为空白。

这是 html 我在使用谷歌浏览器检查时看到的：

和错误：

来自请求/响应标头的片段：

我在 CloudFront 403/404 中设置了两个错误页面以返回 200 和 index.html 响应页面。 如果我删除 403 或更改为响应为 403，所有页面内容文件都返回 403。我的 S3 存储桶设置为允许 GetObject 到 CloudFront OAI，CloudFront 分配也使用相同的身份。

该页面使用在 Route53 中注册和设置的自定义域提供服务。 我尝试在 package.json 文件中指定主页，但如果我得到相同的结果：

• 使用我的自定义域在 package.json 文件中添加“主页”
• 使用“主页”：'。'
• 不指定主页

我已经搜索了所有解决方案，但似乎没有任何效果。

更新：如果我关闭私有 CDN 上的“限制查看器访问”，我的页面加载正常（获取由“公共”cdn 设置的 cookies）。

Answer 1

您的 web 应用程序是 SPA 应用程序，但对 couldfront 上的 js 文件的访问受到限制，因此应用程序崩溃。

你需要设置一个单独的错误页面。 例如403.html 。 并在控制台中配置。