React router links in app broken after move to cloudfront + SSL

不打扰是莪最后的温柔 提交于 2020-01-04 03:51:29

问题


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.

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.


回答1:


Problems

  1. Like most web-servers, CloudFront/S3 will throw a 404 if the bucket doesn't contain the object specified by the URL.
  2. Unknown/unidentified objects will automatically throw a 403 if they are not publicly accessible, or don't have the right permissions

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.

More resources

  • 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


来源:https://stackoverflow.com/questions/54190698/react-router-links-in-app-broken-after-move-to-cloudfront-ssl

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!