Thanks for the article! I'm still using S3 but I moved away from CloudFront. I'm now using www.keycdn.com for content delivery. They also offer CORS support.

Really nice reading. I have not used yet S3 but it's good to know how fix cross origin restriction on all platforms. I've just wrote a blog post on how to use CORS to fix cross-domain issue with @font-face. See http://zinoui.com/blog/cros...

<corsconfiguration xmlns="http://s3.amazonaws.com/doc...">

<corsrule>

<allowedorigin>*</allowedorigin>

<allowedmethod>GET</allowedmethod>

<allowedmethod>PUT</allowedmethod>

<allowedmethod>POST</allowedmethod>

<allowedmethod>DELETE</allowedmethod>

<maxageseconds>3000</maxageseconds>

<allowedheader>*</allowedheader>

<allowedheader>Authorization</allowedheader>

</corsrule>

</corsconfiguration>

But no luck. Web fonts are not loaded. please help me. I have also tried these too.
<allowedorigin>https://mydomain.com</allowedorigin>
<allowedmethod>GET</allowedmethod>
<maxageseconds>3000</maxageseconds>
<allowedheader>Content-*</allowedheader>
<allowedheader>Host</allowedheader>

Thanks buddy for the tip, just ran into this issue recently and this helped!

I want to use fonts for different domain like

<allowedorigin>http://abc.com</allowedorigin>

<allowedorigin>http://xyz.com</allowedorigin>

and

<allowedorigin>http://*.abc.com</allowedorigin>

<allowedorigin>http://*.xyz.com</allowedorigin>

but abc.com is not taking up fonts now.

If you use CloudFront, you'll need to also tweak CloudFront to forward the "Origin" header. See my blog post here: http://www.holovaty.com/wri...

Thank you, this was driving me insane.

I think there's a risk serving fonts off CloudFront using this technique: CloudFront caches the CORS header response from S3, which is specific to the host that requested it. Say you have a font that has fallen out of cache in CloudFront and someone requests it from evil.com - CloudFront will remember "evil.com" as the cross origin requestor because it's caching those response headers from S3. So next time your pages from, say, foo.com request the font, the browser will send Origin: foo.com but receive the cached Key Access-Control-Allow-Origin: http://evil.com and IE / FireFox will fail to render the font on your site.

What kills me is that CORS headers are *not* used for Javascript files, which is really where danger lies, but they are being used for fonts. So dysfunctional...

Here's a suggested workaround: https://forums.aws.amazon.c...

Cloud front now allows you to 'whitelist' headers to pass through to origin and for determining if it need to cache 2 different resources because of different origins. I just set it up to pull from an s3 bucket from my site that supports both http and https as well as several sub domains. The setup is in the behavior view for a cloud front distribution.

This worked *perfectly* thank you Sir.