CORS nginx for Fonts

If you face this nice error

Font from origin ‘http://cdn.domain.com’ has been blocked from loading by Cross-Origin Resource Sharing policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://subdomain.domain.com’ is therefore not allowed access. The response had HTTP status code 401.

This is the instructions to fix it on ubuntu server 14.04 nginx, using serverpilot.

Edit file “/etc/nginx-sp/mime.types”

Be sure this lines are present.

application/vnd.ms-fontobject eot;
application/x-font-ttf ttf;
application/font-woff woff;

In my case only this one was missing

application/x-font-ttf ttf;

Edit you vhost.conf and add

    
location ~* \.(eot|ttf|woff)$ {
    add_header 'Access-Control-Allow-Origin' '*';
    add_header 'Access-Control-Allow-Credentials' 'true';
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
    add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
}

Restart nginx and ready 😉

To test it you can launch:

curl -I http://domaink/themes/kamaleon/fonts/glyphicons-halflings-regular.ttf

Result should be something like

HTTP/1.1 200 OK
Server: nginx
Date: Fri, 12 Feb 2016 10:25:24 GMT
Content-Type: application/x-font-ttf
Content-Length: 41280
Last-Modified: Sat, 05 Dec 2015 12:26:00 GMT
Connection: keep-alive
Vary: Accept-Encoding
ETag: "5662d7d8-a140"
Access-Control-Allow-Origin: *
Accept-Ranges: bytes


Based on fontello info and enable-cors.org thanks.