Cómo agregar un encabezado Access-Control-Allow-Origin


99

Estoy diseñando un sitio web (por ejemplo, mywebsite.com) y este sitio carga fuentes tipográficas de otro sitio (por ejemplo, otro sitio.com). Estaba teniendo problemas con la carga de fuentes de tipografía en Firefox y leí en este blog :

Firefox (que admite @ font-face desde v3.5) no permite fuentes entre dominios de forma predeterminada. Esto significa que la fuente debe provenir del mismo dominio (y subdominio) a menos que pueda agregar un encabezado "Access-Control-Allow-Origin" a la fuente.

¿Cómo puedo configurar el encabezado Access-Control-Allow-Origin en la fuente?


Respuestas:


164

Entonces, lo que debe hacer es ... En la carpeta de archivos de fuentes, coloque un archivo htaccess con lo siguiente.

<FilesMatch "\.(ttf|otf|eot|woff|woff2)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
  </IfModule>
</FilesMatch>

también en su archivo CSS remoto, la declaración font-face necesita la URL absoluta completa del archivo font (no es necesario en los archivos CSS locales):

p.ej

@font-face {
    font-family: 'LeagueGothicRegular';
    src: url('http://www.example.com/css/fonts/League_Gothic.eot?') format('eot'),
         url('http://www.example.com/css/fonts/League_Gothic.woff') format('woff'),
         url('http://www.example.com/css/fonts/League_Gothic.ttf') format('truetype'),
         url('http://www.example.com/css/fonts/League_Gothic.svg')

}

Eso solucionará el problema. Una cosa a tener en cuenta es que puede especificar exactamente a qué dominios se les debe permitir acceder a su fuente. En el htaccess anterior, he especificado que todos pueden acceder a mi fuente, "*"sin embargo, puede limitarlo a:

Una única URL:

Conjunto de encabezados Access-Control-Allow-Origin http://example.com

O una lista de URL delimitadas por comas

Access-Control-Allow-Origin: http://site1.com,http://site2.com

(No se admiten varios valores en las implementaciones actuales)


1
No es necesario utilizar rutas completas. Simple url('/fonts/League_Gothic.woff') format('woff')es suficiente asumiendo que mantiene la carpeta 'fuentes' en el mismo directorio que su archivo .css.
StrayObject

1
¡Esta solución también es válida para solicitudes de dominios cruzados .ajax! ¡Agradable!
Isaac

3
@StrayObject: el archivo CSS remoto deberá utilizar las rutas completas. El archivo CSS local no tiene por qué hacerlo.
Mazatec

Aparentemente, no es posible incluir en la lista blanca varias URL, delimitadas por comas o de otro modo; ver error 671608
Tgr

1
Esta respuesta ( stackoverflow.com/a/4110601 ) parece sugerir que una lista separada por comas no funciona
Asaf

21

Según los documentos oficiales , a los navegadores no les gusta cuando usas el

Access-Control-Allow-Origin: "*"

encabezado si también está utilizando el

Access-Control-Allow-Credentials: "true"

encabezamiento. En cambio, quieren que permitas su origen específicamente. Si aún desea permitir todos los orígenes, puede hacer algo de magia Apache simple para que funcione (asegúrese de haberlo mod_headershabilitado):

Header set Access-Control-Allow-Origin "%{HTTP_ORIGIN}e" env=HTTP_ORIGIN

Los navegadores deben enviar el Originencabezado en todas las solicitudes entre dominios. Los documentos indican específicamente que debe repetir este encabezado en el Access-Control-Allow-Originencabezado si está aceptando / planeando aceptar la solicitud. Eso es lo Headerque está haciendo esta directiva.


2
Eso parece funcionar para mí también, aunque parece tener el efecto secundario de tener que borrar su caché si visita dos sitios diferentes que acceden al sitio
Jack James

1
@Jack: sí, es muy importante para el contenido CDN (mirándote, archivos de fuentes). Dependiendo de la configuración de almacenamiento en caché, podría terminar con el contenido del archivo y un encabezado CORS incorrecto persistiendo localmente (como en su escenario) o en el proxy. (el almacenamiento de caché ?yourdomainfunciona en el último caso, pero devalúa un poco los beneficios de usar una CDN)
ov

2
Por algunas razones, HTTP_ORIGIN no está configurado para mí, tuve que agregar esta línea SetEnvIfNoCase Origin (.+) HTTP_ORIGIN=$1.
David Riccitelli

5

Desafortunadamente, la respuesta aceptada no me funciona, ya que los archivos CSS de mi sitio @importan los archivos CSS de fuentes, y todos están almacenados en un CDN de Rackspace Cloud Files.

Dado que los encabezados de Apache nunca se generan (ya que mi CSS no está en Apache), tuve que hacer varias cosas:

  1. Vaya a la interfaz de usuario de Cloud Files y agregue un encabezado personalizado (Access-Control-Allow-Origin con valor *) para cada archivo de fuente impresionante
  2. Cambie el tipo de contenido de los archivos woff y ttf a font / woff y font / ttf respectivamente

Vea si puede salirse con la suya con solo el # 1, ya que el segundo requiere un poco de trabajo en la línea de comandos.

Para agregar el encabezado personalizado en el n. ° 1:

  • ver el contenedor de archivos en la nube para el archivo
  • desplácese hacia abajo hasta el archivo
  • haga clic en el icono de engranaje
  • haga clic en Editar encabezados
  • seleccione Access-Control-Allow-Origin
  • agregue el carácter único '*' (sin las comillas)
  • Pulsa Enter
  • repita para los otros archivos

Si necesita continuar y hacer # 2, entonces necesitará una línea de comando con CURL

curl -D - --header "X-Auth-Key: your-auth-key-from-rackspace-cloud-control-panel" --header "X-Auth-User: your-cloud-username" https://auth.api.rackspacecloud.com/v1.0

De los resultados devueltos, extraiga los valores para X-Auth-Token y X-Storage-Url

curl -X POST \
  -H "Content-Type: font/woff" \
  --header "X-Auth-Token: returned-x-auth-token" returned-x-storage-url/name-of-your-container/fonts/fontawesome-webfont.woff

curl -X POST \
  -H "Content-Type: font/ttf" \
  --header "X-Auth-Token: returned-x-auth-token" returned-x-storage-url/name-of-your-container/fonts/fontawesome-webfont.ttf

Por supuesto, este proceso solo funciona si está utilizando Rackspace CDN. Otras CDN pueden ofrecer instalaciones similares para editar encabezados de objetos y cambiar tipos de contenido, por lo que tal vez tenga suerte (y publique información adicional aquí).


3

Para la aplicación basada en Java, agregue esto a su archivo web.xml:

<servlet-mapping>
    <servlet-name>default</servlet-name>
    <url-pattern>*.ttf</url-pattern>
</servlet-mapping>

<servlet-mapping>
    <servlet-name>default</servlet-name>
    <url-pattern>*.otf</url-pattern>
</servlet-mapping>

<servlet-mapping>
    <servlet-name>default</servlet-name>
    <url-pattern>*.eot</url-pattern>
</servlet-mapping>

<servlet-mapping>
    <servlet-name>default</servlet-name>
    <url-pattern>*.woff</url-pattern>
</servlet-mapping>


1

En su file.php de solicitud ajax, puede establecer el encabezado de valor.

<?php header('Access-Control-Allow-Origin: *'); //for all ?>
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.