¿Cómo puedo hacer que nginx soporte @ formatos de fuente y permitir acceso-control-permitir-origen?


21

He agregado estas reglas a mime.types:

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

Ahora el encabezado Content-Type se está configurando correctamente para cada uno de ellos. Mi único problema ahora es que Firefox requiere Access-Control-Allow-Origin. Busqué en Google esta respuesta y la agregué a la directiva de mi servidor:

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

pero ahora mis fuentes no se sirven en absoluto.

En cambio, error.loginforma que está tratando de abrirlos en el sistema de archivos local.

02/10/2010 22:20:21 [error] 1641 # 0: * 15 open () "/usr/local/nginx/html/fonts/mgopenmodernabold-webfont.woff" falló (2: No existe tal archivo o directorio) , cliente: 69.164.216.142, servidor: static.arounds.org, solicitud: "HEAD /fonts/mgopenmodernabold-webfont.woff HTTP / 1.1", host: "static.arounds.org"

¿Alguna idea de lo que podría estar mal con la sintaxis? ¿Necesito agregar explícitamente una regla que diga no intente abrirlo localmente o qué?

EDITAR : Creo que el problema es que ahora estoy sirviendo 2 ubicaciones diferentes. Y en lugar de eso, debería hacer la verificación de expresiones regulares dentro de la principal y luego alimentar el encabezado.


También puede agregar "otf" en su regla
Kevin Campion

Respuestas:


18

Woot! Lo tengo ... Era más o menos lo que sospechaba en mi edición, tenía que hacer básicamente la verificación del nombre de archivo regex en mi suela en location {}lugar de hacer una alternativa.

    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 *;
            }
    }

8
No. Realmente no lo haces. Solo necesita aprender sobre la herencia de contexto. Si especifica la directiva raíz del sitio en su bloque de servidor, estará disponible en todos los bloques de ubicación. Le sugiero que lea esto: blog.martinfjordvald.com/2010/07/nginx-primer
Martin Fjordvald

Alguien realmente me lo mencionó en el canal #nginx pero olvidé actualizar la respuesta.
meder omuraliev

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

3
NOTA: Si la solución dada no funciona para usted, lea esto y esto . Es esclarecedor, y puede encontrar la razón por la que no está funcionando.
its_me

Esto no funciona para mí ya que la URL de la fuente contiene una cadena de consulta
Broncha

funciona para mí ...
Manan Shah

Sugerencia: si las llamas en la nube, ¡purgalas!
shakee93

5

Todos los activos

Esto hará que todos los activos funcionen bien. Puede agregar rootsi desea definir una nueva ubicación

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";
}

1
Sí, esto rompió todo
AlxVallejo

3

Otra solución: coloque todas sus fuentes, por ejemplo static/fonts, y agregue

location /static/fonts  {
    add_header "Access-Control-Allow-Origin" *;
    alias /var/www/mysite/static/fonts;
}
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.