CODEWITHSUNDEEP
cssamazon-s3fontsfont-awesomeamazon-cloudfront
Cerin
Cerin

Reputation: 64789

How to allow FontAwesome to load fonts from a different domain

When hosting FontAwesome on a CDN, how do you allow it to load fonts when that CDN's domain does not match your server's domain?

I have my media hosted in an S3 bucket, being served from a Cloudfront endpoint. My webpage, served from example.com, contains links to this Cloudfront endpoint, and all the initial media requests to this endpoint succeed. However, if I trigger any JS that tries to render new FontAwesome content, causing it to try and load fonts, I get an error like:

Access to Font at 'http://lkfejwifisj.cloudfront.net/font-awesome-4.2.0/fonts/fontawesome-webfont.d95d6f5d5ab7.woff?v=4.2.0' from origin 'http://example.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://example.com' is therefore not allowed access.

I made my S3 bucket's CORS policy as open as possible with the configuration:

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>HEAD</AllowedMethod>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

However, that didn't fix the problem.

I'm using Chrome as my browser, and apparently this type of error has been mentioned many many times before. However, none of the proposed solutions are applicable, or don't work for me.

How do I fix this?

Why is Chrome saying "No 'Access-Control-Allow-Origin' header is present on the requested resource", when I explicitly allow all origins in my CORS configuration?

Upvotes: 1

Views: 1056

Answers (1)

Cerin
Cerin

Reputation: 64789

It turned out that my CORSConfiguration is correct, and actually fixes the problem, but my browser is caching the old request and so I still see the same error.

If I load the page in an Incognito browser, ensuring my cache is cleared, I don't get the error.

Upvotes: 2

Related Questions