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

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?

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)

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.

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í).

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>

Consulte este enlace .. Definitivamente resolverá su problema .. Hay muchas soluciones para hacer llamadas GET Ajax entre dominios PERO LA SOLICITUD POST PARA EL DOMINIO CRUZADO SE RESUELVE AQUÍ . Me tomó 3 días darme cuenta.

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

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

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