[英]React SPA blank page when deployed using AWS S3 + CloudFront
I uploaded React Single Page App to AWS S3 served with CloudFront.我将 React Single Page App 上传到使用 CloudFront 服务的 AWS S3。 I have two buckets and two CDN (one public and one private) and restricted viewer access using signed cookies on 'private' CDN.
我有两个存储桶和两个 CDN(一个公共和一个私有),并且在“私有”CDN 上使用签名的 cookies 限制查看器访问。 My page loads blank after redirecting from the 'public' bucket/CDN.
从“公共”存储桶/CDN 重定向后,我的页面加载为空白。
This is html I see when inspected using Google Chrome:这是 html 我在使用谷歌浏览器检查时看到的:
And error:和错误:
Snippet from the request/response headers:来自请求/响应标头的片段:
I have set two error pages in CloudFront 403/404 to return 200 and index.html response page.我在 CloudFront 403/404 中设置了两个错误页面以返回 200 和 index.html 响应页面。 If I remove 403 or change to respond as 403 all of the page content files return 403. My S3 bucket is set to allow GetObject to CloudFront OAI and so does CloudFront distribution use the same identity.
如果我删除 403 或更改为响应为 403,所有页面内容文件都返回 403。我的 S3 存储桶设置为允许 GetObject 到 CloudFront OAI,CloudFront 分配也使用相同的身份。
The page is served using custom domain registered and set up in Route53.该页面使用在 Route53 中注册和设置的自定义域提供服务。 I tried specifying homepage in the package.json file, but I get the same result if I either:
我尝试在 package.json 文件中指定主页,但如果我得到相同的结果:
I've searched every solution out there but nothing seems to work.我已经搜索了所有解决方案,但似乎没有任何效果。
UPDATE: If I turn off 'Restrict viewer access' on the private CDN, my page loads fine (picking up cookies set by the 'public' cdn).更新:如果我关闭私有 CDN 上的“限制查看器访问”,我的页面加载正常(获取由“公共”cdn 设置的 cookies)。
Your web app is a SPA application, but access to the js file on clouldfront is restricted, so the application crashes.您的 web 应用程序是 SPA 应用程序,但对 couldfront 上的 js 文件的访问受到限制,因此应用程序崩溃。
You need to set up a separate error pages.你需要设置一个单独的错误页面。 eg
403.html
.例如
403.html
。 And configure in the console.并在控制台中配置。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.