firefox - headers - access-control-allow-origin php
Cómo agregar un encabezado Access-Control-Allow-Origin (6)
De acuerdo con los documentos oficiales , a los navegadores no les gusta cuando usa 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 quieres permitir todos los orígenes, puedes hacer algo de magia Apache simple para que funcione (asegúrate de tener mod_headers habilitados):
Header set Access-Control-Allow-Origin "%{HTTP_ORIGIN}e" env=HTTP_ORIGIN
Los navegadores deben enviar el encabezado Origin en todas las solicitudes entre dominios. 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 de Header está haciendo.
Estoy diseñando un sitio web (por ejemplo, mywebsite.com) y este sitio carga fuentes tipográficas de fuentes desde otro sitio (por ejemplo, anothersite.com). Estaba teniendo problemas con la carga de la fuente de la fuente que se carga en Firefox y leí en este blog :
Firefox (que admite @ font-face desde v3.5) no permite fuentes de dominio cruzado de forma predeterminada. Esto significa que la fuente debe ser servida desde el 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?
En su archivo.php de la solicitud ajax, puede establecer el encabezado de valor.
<?php header(''Access-Control-Allow-Origin: *''); //for all ?>
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|woff2)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
también en su archivo CSS remoto, la declaración de la fuente de la fuente necesita la URL completa absoluta del archivo de fuente (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 qué dominios deben tener acceso a su fuente. En el htaccess anterior, he especificado que todos pueden acceder a mi fuente con "*" pero puedes limitarla a:
Una sola URL:
Access-Control-Allow-Origin: http://example.com
O una lista de URL delimitada por comas
Access-Control-Allow-Origin: http://site1.com,http://site2.com
(Múltiples valores no son compatibles en las implementaciones actuales)
La respuesta aceptada no me funciona desafortunadamente, ya que los archivos CSS de mi sitio importan los archivos CSS de la fuente, y todos están almacenados en un CDN de Rackspace Cloud Files.
Como los encabezados de Apache nunca se generan (dado que mi CSS no está en Apache), tuve que hacer varias cosas:
- Vaya a la IU de Cloud Files y agregue un encabezado personalizado (Access-Control-Allow-Origin con valor *) para cada archivo de fuente impresionante.
- Cambia el tipo de contenido de los archivos woff y ttf a font / woff y font / ttf respectivamente
Vea si puede salirse con la n. ° 1, ya que el segundo requiere un poco de trabajo de línea de comando.
Para agregar el encabezado personalizado en el n. ° 1:
- ver el contenedor de archivos en la nube para el archivo
- desplazarse hacia abajo hasta el archivo
- haga clic en el icono del engranaje
- haga clic en Editar encabezados
- seleccione Access-Control-Allow-Origin
- agregue el caracter simple ''*'' (sin las comillas)
- Presione enter
- repetir para los otros archivos
Si necesita continuar y hacer el n. ° 2, 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á usando 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í).
Para la aplicación basada en Java, agréguela 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>
Verifique este enlace. Definitivamente resolverá su problema. Hay muchas soluciones para hacer llamadas AJAX de dominio cruzado, PERO LA SOLICITUD POSTAL PARA EL DOMINIO TRANSVERSAL SE RESUELVE AQUÍ . Me llevó 3 días resolverlo.