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

Question

Estoy diseñando un sitio web (por ejemplo, mywebsite.com) y este sitio carga fuentes de fuentes de otro sitio (por ejemplo, anothersite.com). Estaba teniendo problemas con el tipo de letra de fuente de carga en Firefox y que leí en this blog:

Firefox (que apoya @ font-face desde v3.5) no permite que entre dominios fuentes por defecto. Esto significa que la fuente debe ser servida desde el mismo dominio (y el subdominio) a menos que pueda agregar un encabezado " " "Access-Control-Allow-Origin" a la fuente.

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

Answer 1

Entonces lo que debes hacer es ... En la carpeta de archivos de fuentes, coloca un archivo htaccess con lo siguiente en él.

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

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

por ejemplo,

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

} 

Eso solucionará el problema. Una cosa a tener en cuenta es que puede especificar exactamente qué dominios deben tener acceso a su fuente. En el .htaccess anterior he especificado que todo el mundo puede acceder a mi fuente con "*" sin embargo se puede limitar a:

una única URL:

Access-Control-Allow-Origin: http://yoursite.com 

o una lista separada por comas de direcciones URL

Access-Control-Allow-Origin: http://yoursite.com,http://anothersite.com

(valores múltiples no están soportados en las implementaciones actuales)

Answer 2

Según the official docs, los navegadores no les gusta cuando se utiliza la cabecera

Access-Control-Allow-Origin: "*" 

si también está utilizando la cabecera

Access-Control-Allow-Credentials: "true" 

. En cambio, quieren que permitas su origen específicamente. Si aún desea permitir a todos los orígenes, se puede hacer un poco de magia simple Apache para conseguir que funcione (asegúrese de que ha mod_headers habilitado):

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

se requieren

navegadores para enviar la cabecera Origin sobre todo entre dominios peticiones. Los documentos especifican que necesita repetir este encabezado en el encabezado Access-Control-Allow-Origin si está aceptando/planeando aceptar la solicitud. Eso es lo que esta directiva Header está haciendo.

Answer 3

Revise este enlace .. Definitivamente resolverá su problema .. Hay un montón de soluciones para realizar llamadas de dominio cruzado GET Ajax PERO LA PETICIÓN DE POST PARA CROSS DOMAIN SE RESUELVE AQUÍ. Me llevó 3 días resolverlo.

http://blogs.msdn.com/b/carlosfigueira/archive/2012/02/20/implementing-cors-support-in-asp-net-web-apis.aspx

Answer 4

Para aplicación basada en Java agregarlo 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> 

Answer 5

La respuesta aceptada no funciona para mí, lamentablemente, ya que mis archivos CSS del sitio @Import la fuente CSS archivos, y todos están almacenados en un Rackspace Cloud Files CDN.

Desde las cabeceras de Apache no se generan (desde mi CSS no está en Apache), que tenía que hacer varias cosas:

1. Ir a la nube archivos de interfaz de usuario y agregar un encabezado personalizado (Acceso + Control Allow-Origin y valor *) para cada archivo de fuente-impresionantes
2. Cambiar el tipo de contenido de los archivos WOFF y ttf de fuente/woff y la fuente/ttf respectivamente

Vea si usted puede conseguir lejos con sólo # 1, ya que el segundo requiere un poco de trabajo de línea de comando.

Para añadir el encabezado personalizado en el # 1:

• ver el contenedor de archivos en la nube para el archivo
• de desplazamiento hacia abajo en el fichero de
• haga clic en el icono de la rueda dentada
• haga clic en Editar encabezados
• seleccione Access-Control-Allow-Origin
• agregue el carácter simple '*' (sin las comillas)
• pulsa enter
• repetición para los otros archivos

Si es necesario continuar y hacer # 2, entonces usted necesita una línea de comandos con el enrollamiento

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 

A partir de los resultados devueltos, extraer los valores para X-Auth-simbólico y X-Almacenamiento-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 sólo funciona si está utilizando el Rackspace CDN. Otros CDN pueden ofrecer instalaciones similares para editar los encabezados de los objetos y cambiar los tipos de contenido, por lo que tal vez tenga suerte (y publique información adicional aquí).

Answer 6

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

<?php header('Access-Control-Allow-Origin: *'); //for all ?>