Menu
I have uploaded a react app to AWS S3 and am using static website hosting. I then linked a cloudfront distribution to the s3 bucket.
I am able to navigate to the site and it functions properly except when I navigate to a new page my-domain/new-page. At first it succeeds but if I try and load the page directly or refresh I get a 403 forbidden error.
823
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.
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.
To edit settings for a distribution, choose the Distribution Settings tab. To update general settings, choose Edit. Otherwise, choose the tab for the settings that you want to update: Origins or Behaviors. Make the updates, and then, to save your changes, choose Yes, Edit.
If your distribution doesn't have a default root object defined, and a requester doesn't have s3:ListBucket access, then the requester receives an Access Denied error. The requester gets this error instead of a 404 Not Found error when they request the root of your distribution.
Using react with S3 and CloudFront, I had this or a similar issue where loading the initial index page and then linking to other pages worked just fine (push state changes), but if I refreshed the page or linked directly to the page, it came up as "Access Denied," status 403.
The solution I found was to add custom error pages for 403 and 404 errors to the CloudFront configuration.
S3 responds 403 when an object doesn't exist as would be the case with pages in client side routing.
171
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
