reactjs - 使用 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）。

标签： reactjsamazon-web-servicesamazon-cloudfront

Answer 1

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

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