Setting Access-Control-Allow-Origin on Cloudfront – A Step-by-Step Guide

amazon s3amazon-cloudfrontamazon-web-servicescorsfirefox

I am having problems serving static assets to Firefox using AWS Cloudfront.

Chrome works perfect, but Firefox is returning a CORS error.

If I execute curl , I get:

HTTP/1.1 200 OK
Content-Type: application/x-font-opentype
Content-Length: 39420
Connection: keep-alive
Date: Mon, 11 Aug 2014 21:53:50 GMT
Cache-Control: public, max-age=31557600
Expires: Sun, 09 Aug 2015 01:28:02 GMT
Last-Modified: Fri, 08 Aug 2014 19:28:05 GMT
ETag: "9df744bdf9372cf4cff87bb3e2d68fc8"
Accept-Ranges: bytes
Server: AmazonS3
Age: 2743
X-Cache: Hit from cloudfront
Via: 1.1 c445b20dfbf3128d810e975e5d84e2cd.cloudfront.net (CloudFront)
X-Amz-Cf-Id: ...

Which I think needs the header:

Access-Control-Allow-Origin: *

Can anyone help me?
Why is it a problem on Firefox and not Chrome? How can I solve it?

Best Answer

First thing, you need to make sure that you whitelist origin header:

If you want CloudFront to respect cross-origin resource sharing settings, configure CloudFront to forward the Origin header to your origin.

http://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/RequestAndResponseBehaviorCustomOrigin.html#request-custom-cors

Also see: http://aws.amazon.com/blogs/aws/enhanced-cloudfront-customization/

By the way, there are several similar questions on serverfault/stackoverflow and a lot of answers.

Related Topic