Cross Origin Resource Sharing is a very common issue faced.

You will usually get the message like the following.

Font from origin ‘https://k3j3jd3k2j.cloudfront.net’ has been blocked from loading by Cross-Origin Resource Sharing policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘https://mervcodes.wpengine.com’ is therefore not allowed access.

There are two ways to resolve this issue.

Solution 1: S3 Bucket Way

This is the most common solution, which is to set the CORS header in your S3 bucket.

http://docs.aws.amazon.com/AmazonS3/latest/dev/cors.html

 

Solution 2: DNS Way

Step 1

Create a subdomain like

cdn.mervcodes.com

instead of using

k3j3jd3k2j.cloudfront.net

Step 2

Create a CNAME record that points

cdn.mervcodes.com

to

k3j3jd3k2j.cloudfront.net

 

That’s it. You are done!