If you are serving static content directly Amazon S3 via CloudFront (CDN) you should probably get an error about fonts, images or other static contents to deliver for your users. Actually, it’s not complicated. You can fix this issue on your Amazon S3 Bucket CORS settings.
What is Amazon S3 CORS?
Cross Origin Resource Sharing (aka CORS). The CORS specification gives you the ability to build web applications that make requests to domains other than the one which supplied the primary content.
Step 1: Open your Bucket Permission settings on AWS Web Console
Visit https://s3.console.aws.amazon.com page and sign in with your credentials to your S3 console and than, select your bucket which one is connected to your CloudFront.
Step 2: Apply CORS Configuration
In Permissions tab, you can see “CORS configuration” section. Please select this section and apply the code below:
<CORSConfiguration> <CORSRule> <AllowedOrigin>https://YOURWEBSITEADDRESS.com</AllowedOrigin> <AllowedMethod>PUT</AllowedMethod> <AllowedMethod>POST</AllowedMethod> <AllowedHeader>*</AllowedHeader> </CORSRule> <CORSRule> <AllowedOrigin>*</AllowedOrigin> <AllowedMethod>GET</AllowedMethod> </CORSRule> </CORSConfiguration>
After the paste, change the <AllowedOrigin></AllowedOrigin> with your website address and click the “Save” button.
Conclusion
Hooray! Now, you have successfully set your CORS settings and now your users can able to view your content which one is located in your Amazon S3 Bucket.