I have a React app that runs on AWS S3 and CloudFront. When I access the app from the given URL it opens the home page fine. When I navigate to another page using a button on the nav bar it opens the page just fine. But if I then refresh the page I get this error:
I also get that same error if I attempt to navigate to the page via a specific path such as www.website.com/blog
.
If I access the website straight from the S3 object URL everything works just fine. Pages reload and I can use direct paths to open a page. This leads me to believe the issue lies in CloudFront. However I have no idea where to start in debugging that issue.
S3 setup:
Answer: This occurs when the workstation or browser does not have a default RSS feed reader installed or enabled. You may notice in Chrome because Chrome does not have a default RSS reader, like Firefox or Internet Explorer.
A custom origin is returning the 403 error A 403 error might be caused by an AWS WAF or custom firewall configuration made at the origin. To troubleshoot, make the request directly to the origin. If you can replicate the error without CloudFront, then the origin is causing the 403 error.
Request Blocked." is an error from the client. This error can occur due to the default actions of AWS WAF rules associated with the CloudFront distribution. The following settings may cause a Request Blocked error: When the default action is set to Allow, the request matches a rule that has Action set to Block.
For enabling CORS we need to configure Cloudfront to allow forwarding of required headers. We can configure the behavior of Cloudfront by clicking on Cloudfront Distribution's "Distribution Settings". Then from the "Behaviour" tab click on "Edit". Here we need to whitelist the headers that need to be forwarded.
You have to set the S3 index url and S3 error url to your index page..try it
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With