Why is CloudFront returning 403 on two specific files in my S3 bucket?
Hello,
I am trying to host a simple react app using Tailwind CSS in an S3 bucket and Cloudfront.
When I go to my Cloudfront URL, the page is blank because for two files the access is forbidden. I am a bit confused as I thought I had created the necessary bucket permissions to allow Cloudfront to access my S3 bucket objects but for some reason, these two files are forbidden. Please see the screenshots below of my error in the browser, bucket policy and the two files in the S3 bucket.
After some searching online I have done the following to try and troubleshoot. I have created invalidations and set the default root object to index.html. I have also created error pages, specifically for 403 errors to route back to the index.html page but nothing seems to work.
Any help would be much appreciated. Thank you!
- Newest
- Most votes
- Most comments
Hi Hello:
Because you can successfully access the page, even though it only displays one screen due to the lack of necessary components, I initially judge that the permission configuration between your CloudFront and S3 is correct. Returning 403 under this architecture is not necessarily directly related to your permission error. If the object does not exist in the corresponding path, it may also cause your endpoint to return a 403 error.
From this test result, I suggest you check whether these objects exist in your S3 bucket.
s3://<Bucket_Name>/assets/index-DI9R-h8i.css
s3://<Bucket_Name>/assets/index-6R1LzD2S.js
I tried to access your site with path prefix /assets/, and I can get a 200 code. So you might reference the object with the wrong path. Or you have to move the objects under the /assets/ folder in your s3 bucket.
Relevant content
- Accepted Answerasked 2 years ago
- asked 5 years ago
- Accepted Answerasked 3 months ago
AWS OFFICIALUpdated 2 years ago- AWS OFFICIALUpdated 9 months ago
- AWS OFFICIALUpdated a year ago
Thank you for your response it's really helpful!
So I checked and those files do exist in my bucket but they aren't in an 'assets' folder as I don't have one in my S3 bucket. All my files are at the root level if that makes sense. I am a bit unsure where the /assets/ is coming from. For example, this is the S3 URI for one of the files s3://<Bucket_Name>/index-6R1LzD2S.js
Therefore, this URI DOES NOT exist "s3://<Bucket_Name>/assets/index-6R1LzD2S.js" in my bucket but I don't know where it is coming from and why the path for these files are being prefixed with "/assets/ as there is no assets folder in my S3 bucket.
In your
index.htmlHTML file , we can see it define how browser to reference these js or css objects to render your home page. I don't know how you get this file, but you have to make sure the front end request path structure should align with your s3's path structure.btw, if you think my reply can help you move forward, you can mark my reply as
Accepted Answer. I will be help me to get come credit on this community. Thanks.Hi Cat,
Just want to say thank you! Looking in my index.html file was the issue! I didn't realise that was the src for those two files and I was uploading the files individually instead of in the assets folder! Such an obvious oversight!