I am using S3 CORS
for serving fonts. If S3
domain name is used for serving fonts, it works in Firefox
, but when CloudFront
is used, it doesn't. Works with Google Chrome
.
My CORS
configuration on S3
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>http://*.example.com</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<MaxAgeSeconds>30000</MaxAgeSeconds>
<AllowedHeader>Content-*</AllowedHeader>
<AllowedHeader>Host</AllowedHeader>
</CORSRule>
<CORSRule>
<AllowedOrigin>https://*.example.com</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<MaxAgeSeconds>30000</MaxAgeSeconds>
<AllowedHeader>Content-*</AllowedHeader>
<AllowedHeader>Host</AllowedHeader>
</CORSRule>
</CORSConfiguration>
In order for me to get this working. I had to set the CORS configuration to include the CloudFront distribution domain.
I also had to change the settings in my CloudFront distribution behaviors, to Allow forwarding of query strings. I cant recall where I saw that was a requirement.
I then invalidated the fonts causing the issues.
Then we were good to go!
hope that helps