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

Question

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

这是我使用 Google Chrome 检查时看到的 html：

还有错误：

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

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

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

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

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

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

Answer 1

您的网络应用是 SPA 应用，但对 clouldfront 上的 js 文件的访问受到限制，因此应用崩溃。

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