Comment puis-je faire en sorte que nginx supporte les formats @ font-face et autorise le contrôle d'accès-autorise-l'origine?

21

J'ai ajouté ces règles à mime.types:

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

Maintenant, l'en-tête Content-Type est correctement défini pour chacun d'eux. Mon seul problème maintenant est que Firefox nécessite Access-Control-Allow-Origin. J'ai googlé cette réponse et ajouté ceci à ma directive serveur:

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

mais maintenant mes polices ne sont plus du tout servies.

Au lieu de cela, les error.lograpports indiquant qu'il essaie de les ouvrir sur le système de fichiers local ..

2010/10/02 22:20:21 [erreur] 1641 # 0: * 15 open () "/usr/local/nginx/html/fonts/mgopenmodernabold-webfont.woff" a échoué (2: aucun fichier ou répertoire de ce type) , client: 69.164.216.142, se rver: static.arounds.org, demande: "HEAD /fonts/mgopenmodernabold-webfont.woff HTTP / 1.1", hôte: "static.arounds.org"

Avez-vous des idées sur la syntaxe? Dois-je ajouter explicitement une règle disant de ne pas essayer de l'ouvrir localement ou quoi?

EDIT : Je pense que le problème est que je sers 2 emplacements différents maintenant. Et au lieu de cela, je devrais faire la vérification des expressions rationnelles à l'intérieur de la principale, puis nourrir l'en-tête.

meder omuraliev
la source
Vous pouvez également ajouter "otf" dans votre règle
Kevin Campion

Réponses:

18

Woot! J'ai compris. C'était à peu près ce que je soupçonnais dans mon montage, j'ai dû faire la vérification du nom de fichier regex dans ma semelle location {}au lieu d'en faire un autre.

    location / { 
            root /www/site.org/public/;
            index index.html;

            if ($request_filename ~* ^.*?/([^/]*?)$)
            {
                set $filename $1; 
            }

            if ($filename ~* ^.*?\.(eot)|(ttf)|(woff)$){
                add_header Access-Control-Allow-Origin *;
            }
    }
meder omuraliev
la source
8
Non, vraiment pas. Il vous suffit de vous renseigner sur l'héritage du contexte. Si vous spécifiez la directive racine du site dans votre bloc serveur, elle sera disponible dans tous les blocs d'emplacement. Je vous suggère de lire ceci: blog.martinfjordvald.com/2010/07/nginx-primer
Martin Fjordvald
Quelqu'un m'a mentionné cela dans le canal #nginx mais j'ai oublié de mettre à jour la réponse.
meder omuraliev
12
location ~* \.(eot|ttf|woff)$ {
    add_header Access-Control-Allow-Origin *;
}
Diego Carrion
la source
3
REMARQUE: Si la solution donnée ne fonctionne pas pour vous, lisez ceci et ceci . C'est instructif, et vous pouvez trouver la raison pour laquelle cela ne fonctionne pas.
its_me
Cela ne fonctionne pas pour moi car l'url de la police contient une chaîne de requête
Broncha
travaille pour moi ...
Manan Shah
Astuce: si vous les purgez cloudflare !!
shakee93
5

Tous les actifs

Cela permettra à tous les actifs de fonctionner correctement. Vous pouvez ajouter rootsi vous souhaitez définir un nouvel emplacement

location ~ \.(js|css|png|jpg|jpeg|gif|ico|html|woff|woff2|ttf|svg|eot|otf)$ {
    add_header "Access-Control-Allow-Origin" "*";
    expires 1M;
    access_log off;
    add_header Cache-Control "public";
}
Pian0_M4n
la source
1
Oui, cela a tout cassé
AlxVallejo
3

une autre solution: mettez toutes vos polices, par exemple static/fonts, et ajoutez

location /static/fonts  {
    add_header "Access-Control-Allow-Origin" *;
    alias /var/www/mysite/static/fonts;
}
user334690
la source