4

I have a CloudFront distribution that blocks the font download in Chrome (desktop version) with the fallowing error:

Font from origin 'https://....cloudfront.net' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://example.com' is therefore not allowed access.

Where should I set this Access-Control-Allow-Origin header?

I tried adding the header in the "Origin" section of the could distribution but it does not produce any effect.

enter image description here

EDIT #1:

Nginx configuration on origin has the fallowing directive:

location ~ \.(eot|ttf|woff|woff2)$ {
    add_header Access-Control-Allow-Origin *;
}

which on this test curl -I https://example.com/skin/frontend/smartwave/default/megamenu/css/fonts/fontawesome-webfont.woff

Retuns the fallowing response:

HTTP/1.1 200 OK
Server: nginx
Date: Tue, 02 Feb 2016 17:53:39 GMT
Content-Type: application/font-woff
Content-Length: 44432
Last-Modified: Wed, 13 May 2015 15:58:11 GMT
Connection: keep-alive
ETag: "55537493-ad90"
Pragma: public
Cache-Control: max-age=31536000, public, must-revalidate, proxy-revalidate
Accept-Ranges: bytes

From what I see here this header Access-Control-Allow-Origin is missing.

Also I whitelisted the header on CloudFront so that it will not block it:

enter image description here

Mike
  • 3,017
  • 1
  • 34
  • 47
  • Definitely not in Origin Custom Headers. What kind of server is the origin? Specifically, is it S3, or a custom origin? – Michael - sqlbot Feb 01 '16 at 22:38
  • @Michael-sqlbot this is a VPS in a data-center. Nothing related to Amazon – Mike Feb 02 '16 at 08:34
  • Hi @mugur, did you find how to configure it? I(ve the same problem with a rails app on heroku. – fro_oo May 05 '16 at 23:24
  • Hi @fro_oo, the problem was related to origin server and not to the amazon CloudFront. See answer please. – Mike May 09 '16 at 07:14

1 Answers1

1

That was hard to trace as the rules for headers were set in 2 different locations and not in one.

Fixing the correct header for the correct type of file did the job, but you have to consider the fact that in some locations trying to overwrite the NGINX rules does not work. It will only consider the first rule.

A comprehensive description of headers can be found here https://stackoverflow.com/a/10636765/1168944

Community
  • 1
  • 1
Mike
  • 3,017
  • 1
  • 34
  • 47
  • 1
    So, what is the correct solution? Can not understand what to do exactly – Shalafister's Dec 20 '16 at 21:17
  • 1
    @Emre add Access-Control-Allow-Origin header at origin (your server). A comprehensive description can be found here http://stackoverflow.com/a/10636765/1168944 – Mike Dec 22 '16 at 08:04