CORS Issue with woff2 fonts behind CDN in Chrome

Question

I have an S3 Bucket fronted with a Cloudfront CDN. In that bucket, I have some woff2 fonts that were automatically tagged with the content type octet-stream. When trying to load that font from a CSS file on a live production website, I get the following error:

Access to Font at 'https://cdn.example.com/fonts/my-font.woff2' from origin 
'https://www.live-website.com' has been blocked by CORS policy: 
No 'Access-Control-Allow-Origin' header is present on the requested resource. 
Origin 'https://www.live-website.com' is therefore not allowed access.

The thing is that a curl reveals that the Access-Control-Allow-Origin is present:

HTTP/1.1 200 OK
Content-Type: binary/octet-stream
Content-Length: 98488
Connection: keep-alive
Date: Wed, 08 Aug 2018 19:43:01 GMT
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET
Access-Control-Max-Age: 3000
Last-Modified: Mon, 14 Aug 2017 14:57:06 GMT
ETag: "<redacted>"
Accept-Ranges: bytes
Server: AmazonS3
Age: 84847
X-Cache: Hit from cloudfront
Via: 1.1 <redacted>
X-Amz-Cf-Id: <redacted>

Everything is working fine in Firefox, so I guess that Chrome is doing an extra validation that blocks my font.

Minhminho

Answer 1

Turns out that the problem was actually with the Content-Type. As soon as I changed the content type to application/font-woff2 and invalidated the cache of these woff2 files, everything went through smoothly.

Minhminho

You sir, have saved my day!! If there was some way I would give you 100 points for this one. – Klipspringer

@Klipspringer a thank you is enough ;) I am glad that my struggles could help someone out! – Minhminho

I experienced the exact same problem. CORS error when loading woff2 fonts only from Chrome. But unfortunately, after I changed the content type to application/font-woff2, the problem persisted. I reloaded the page using Cmd + Shift + R and cleared browser cache. Postman showed Access-Control-Allow-Origin is in the response header. Am I missing something? – Gann

It also worked for me. I think you should explain how you changed the Content-Type though. I did it directly on AWS S3, opening each file and changing the "Metadata" "Content-Type" key. – Loosejointed

What was the original mime type? To my understanding the Content-Type should be font/woff2 – Placeman

Answer 2

My problem with CORS and multi domain was that Cloudfront was taking in cache the first request so I had to select in Whitelist Headers the Origin option. And it works. enter image description here

Hypostyle