Welcome to ShenZhenJia Knowledge Sharing Community for programmer and developer-Open, Learning and Share
menu search
person
Welcome To Ask or Share your Answers For Others

Categories

I've been researching this issue where a specific font file isn't rendered on remote sites because of CORS restrictions.

So far I have been able to identify that requests for that url are responding with access-control-allow-origin, but nginx is rejecting requests for that font when made remotely.

I am using laravel and the laravel-cors plugin from spatie, but I wouldn't think that would return header information for a style sheet or font not rendered from laravel routes.

Does anyone know why this would happen?

My Error

Access to font at 'https://example.com/css/widget-icons/icomoon.ttf?wiodlm' from origin 'http://www.second-example.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Header retrieved via curl (It seems to allow curl requests)

curl -I https://example.com/css/widget-icons/icomoon.ttf?wiodlm

HTTP/2 200 
date: Sun, 13 Jan 2019 16:57:34 GMT
content-type: application/x-font-ttf
content-length: 1316
set-cookie: AWSALB=r3yRudj6XwTlfaFzEdtxrecHzLLplOKlpRMbKuqL8InwUQYylNVFaZtmGHK2wQDgjvaXsBtRVcTCyjWidjTFUFmoDzKLBLH0gL6qarns38Qn4FuDNCZogawHtOjD; Expires=Sun, 20 Jan 2019 16:57:34 GMT; Path=/
server: nginx/1.14.1
last-modified: Tue, 25 Dec 2018 05:42:49 GMT
etag: "5c21c359-524"
expires: Thu, 31 Dec 2037 23:55:55 GMT
cache-control: max-age=315360000
access-control-allow-origin: *
accept-ranges: bytes

My nginx config to Access-Control-Allow-Origin (It's set to the proper case sensitivity).

location ~* .(gif|jpg|jpeg|png|ico|wmv|3gp|avi|mpg|mpeg|mp4|flv|mp3|mid|js|css|wml|swf|ttf|ttc|otf|eot|woff|woff2)$ {
        add_header Access-Control-Allow-Origin "*";
        expires max;
}

Mime types added to pass ttf

application/x-font-ttf           ttc ttf;
application/x-font-otf           otf;
application/font-woff                            woff;
application/font-woff2           woff2;
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
thumb_up_alt 0 like thumb_down_alt 0 dislike
218 views
Welcome To Ask or Share your Answers For Others

1 Answer

I resolved this issue by modifying the mime.types used for ttf from application/x-font-ttf to font/ttf.

my nginx config

    location ~* .(js|css|ttf|ttc|otf|eot|woff|woff2)$ {
            add_header access-control-allow-origin "*";
            expires max;
    }

mime.types file

mime.types edit. 
    application/x-font-ttf           ttc;
    application/x-font-otf           otf;
    application/font-woff2           woff2;
    font/ttf                         ttf;

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
thumb_up_alt 0 like thumb_down_alt 0 dislike
Welcome to ShenZhenJia Knowledge Sharing Community for programmer and developer-Open, Learning and Share
...