web-dev-qa-db-fra.com

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

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é ceci 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, le error.log signale 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?

[~ # ~] modifier [~ # ~] : 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 régulières à l'intérieur de la principale, puis nourrir l'en-tête.

nginxhttp-headers
23
meder omuraliev

Woot! J'ai compris .. C'était à peu près ce que je soupçonnais dans mon montage, je devais essentiellement faire la vérification du nom de fichier regex dans ma seule location {} au lieu d'en créer une alternative.

    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 *;
            }
    }
21
meder omuraliev
location ~* \.(eot|ttf|woff)$ {
    add_header Access-Control-Allow-Origin *;
}
12
Diego Carrion

Tous les actifs

Cela permettra à tous les actifs de fonctionner correctement. Vous pouvez ajouter root si 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";
}
6
Pian0_M4n

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

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