I have a CloudFront distribution set up with an Nginx server as the origin (a Media Temple DV server, to be specific). I enabled the Access-Control-Allow-Origin: * header so fonts will work in Firefox. However, Firefox throws a CORS error for fonts loaded from this CloudFront/Nginx distribution.

I created another CloudFront distribution, this time with an Apache server as the origin, and set Access-Control-Allow-Origin: * also. Firefox displays fonts from this origin without issue.

I've set up a demo page here: http://kristengrote.com/cors-test/

When I perform a curl request for the same font file from each distribution, both files return almost exactly the same headers:

Apache Origin                                                            Nginx Origin                           
———————————————————                                                      ——————————————————— 
HTTP/1.1 200 OK                                                          HTTP/1.1 200 OK
Server: Apache                                                           Server: nginx
Content-Type: application/font-woff                                      Content-Type: application/font-woff
Content-Length: 25428                                                    Content-Length: 25428
Connection: keep-alive                                                   Connection: keep-alive
Date: Wed, 11 Jun 2014 23:23:09 GMT                                      Date: Wed, 11 Jun 2014 23:15:23 GMT
Last-Modified: Tue, 10 Jun 2014 22:15:56 GMT                             Last-Modified: Tue, 10 Jun 2014 22:56:09 GMT
Accept-Ranges: bytes                                                     Accept-Ranges: bytes
Cache-Control: max-age=2592000                                           Cache-Control: max-age=2592000
Expires: Fri, 11 Jul 2014 23:23:09 GMT                                   Expires: Fri, 11 Jul 2014 23:15:23 GMT
Access-Control-Allow-Origin: *                                           Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, HEAD                                  Access-Control-Allow-Methods: GET, HEAD
Access-Control-Allow-Headers: *                                          Access-Control-Allow-Headers: *
Access-Control-Max-Age: 3000                                             Access-Control-Max-Age: 3000
X-Cache: Hit from cloudfront                                             X-Cache: Hit from cloudfront
Via: 1.1 210111ffb8239a13be669aa7c59f53bd.cloudfront.net (CloudFront)    Via: 1.1 fa0dd57deefe7337151830e7e9660414.cloudfront.net (CloudFront)
X-Amz-Cf-Id: QWucpBoZnS3B8E1mlXR2V5V-SVUoITCeVb64fETuAgNuGuTLnbzAhw==    X-Amz-Cf-Id: E2Z3VOIfR5QPcYN1osOgvk0HyBwc3PxrFBBHYdA65ZntXDe-srzgUQ==    
                                                                         Age: 487
                                                                         X-Accel-Version: 0.01
                                                                         X-Powered-By: PleskLin
                                                                         X-Robots-Tag: noindex, nofollow

So the only conclusion I can draw is that something about Nginx is preventing Firefox from recognizing CORS and allowing the fonts via CloudFront.

Any ideas on what the heck is happening here?

  • Can you post the headers returned by the nginx origin? if they are the same, there should be no difference between apache and nginx. The browser only cares about the raw HTTP response (status,headers,body) – bjunix Sep 4 '14 at 8:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.