CORS Fails on CloudFront Distribution with Nginx Origin

Posted by kgrote on Server Fault See other posts from Server Fault or by kgrote
Published on 2014-06-11T23:53:33Z Indexed on 2014/06/12 3:27 UTC
Read the original article Hit count: 651

Filed under:
|
|

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?

© Server Fault or respective owner

Related posts about nginx

Related posts about firefox