移动到Cloudfront + SSL后，应用程序中的React路由器链接断开 [英] React router links in app broken after move to cloudfront + SSL
问题描述
我有一个React应用，使用S3存储桶中托管的react-router，并使用Route53作为DNS提供程序。该应用程序在指向S3存储桶的Route53配置下运行良好。
I have a react app, using react-router hosted in an S3 bucket, using Route53 as a DNS provider. The app worked fine with the Route53 config pointing to the S3 bucket.
由于我想使用SSL，因此我创建了一个指向存储桶的Cloudfront发行版，并带有SSL证书。，并将DNS指向它。从那以后，所有链接都不起作用（（example.com有效，而example.com/foo不起作用）。它只是返回一个NoSuchKey错误。我知道这是不正确的，因为密钥肯定在那里，并且以前也可以使用。
Since I want to use SSL, I created a Cloudfront distribution pointing to the bucket, with an SSL cert., and pointed the DNS to it. Since doing that, none of the links work, (example.com works, but example.com/foo does not). It just returns a NoSuchKey error. I know that this is incorrect, as the key is definitely there, and it was working before.
推荐答案
问题
Problems
- 像 most 网络服务器一样，如果存储桶中不包含指定的对象，则CloudFront / S3将抛出404网址。
- 如果未知对象/对象无法公开访问或没有正确的权限，则会自动抛出403
- Like most web-servers, CloudFront/S3 will throw a 404 if the bucket doesn't contain the object specified by the URL.
- Unknown/unidentified objects will automatically throw a 403 if they are not publicly accessible, or don't have the right permissions
解决方案
当您使用Amazon S3或自定义时，您可以让CloudFront将对象返回给查看器（例如HTML文件）。 origin向CloudFront返回HTTP 4xx或5xx状态代码。您还可以指定来自源或自定义错误页面的错误响应在CloudFront边缘缓存中的缓存时间。
Solution
You can have CloudFront return an object to the viewer (for example, an HTML file) when your Amazon S3 or custom origin returns an HTTP 4xx or 5xx status code to CloudFront. You can also specify how long an error response from your origin or a custom error page is cached in CloudFront edge caches.
- CloudFront的处理方式并从您的来源缓存HTTP 4xx和5xx状态代码
- 为特定的HTTP状态代码创建自定义错误页面
- 如何解决来自Amazon S3的HTTP 404错误 NoSuchKey？
- CloudFron t：自定义错误页面和错误缓存
- How CloudFront Processes and Caches HTTP 4xx and 5xx Status Codes from Your Origin
- Creating a Custom Error Page for Specific HTTP Status Codes
- How can I troubleshoot the HTTP 404 error "NoSuchKey" from Amazon S3?
- CloudFront: Custom Error Pages and Error Caching
这篇关于移动到Cloudfront + SSL后，应用程序中的React路由器链接断开的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
