Los íconos de Font Awesome no se muestran en Chrome, un problema de política de intercambio de recursos de origen cruzado relacionado con MaxCDN

acabo de notar en varios sitios web que los íconos geniales de la fuente no se muestran en Google Chrome. La consola muestra el siguiente error:

La fuente del origen ‘ http://cdn.keywest.life ‘ ha sido bloqueada para que no se cargue por la política de Intercambio de recursos de origen cruzado: No hay encabezado ‘Access-Control-Allow-Origin’ presente en el recurso solicitado. Origen ‘ http://www.keywest.life ‘ por lo tanto, no está permitido el acceso.

Encontré exactamente el mismo problema en muchos otros sitios. Esto se puede solucionar fácilmente reemplazando la propia referencia CDN con:

//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css

-sin embargo, esta no es la solución, solo una solución. Me encantaría saber el motivo y la solución correcta.

(La causa es esta: el sitio web está utilizando su propio CDN, provisto por MaxCDN y tiene la referencia a las fonts fuente impresionantes y estas no son cargadas por Chrome, si está cargando el mismo recurso del recurso Bootstrapcdn mencionado anteriormente) trabajos)

Aquí hay un ejemplo del problema (en el menú y en los íconos sociales en el pie de página: http://www.keywestnight.com/fantasy-fest )

Gracias por cualquier ayuda / explicación!

Aquí está el método de trabajo para permitir el acceso desde todos los dominios para webfonts :

# Allow access from all domains for webfonts. # Alternatively you could only whitelist your # subdomains like "subdomain.example.com".   Header set Access-Control-Allow-Origin "*"   

El problema no está en el archivo CSS, tiene que ver con cómo se sirve el archivo de fuente. El archivo font-awesome.min.css tiene líneas como

 @font-face{font-family:'FontAwesome'; src:url('../fonts/fontawesome-webfont.eot?v=4.2.0'); src:url('../fonts/fontawesome-webfont.eot?#iefix&v=4.2.0') format('embedded-opentype'),url('../fonts/fontawesome-webfont.woff?v=4.2.0') format('woff'),url('../fonts/fontawesome-webfont.ttf?v=4.2.0') format('truetype'),url('../fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular') format('svg'); font-weight:normal; font-style:normal} 

lo que hace que el navegador solicite un archivo de fuente apropiado (eot, woff, ttf o svg) desde el mismo servidor que el archivo CSS. Esto es lógico y correcto.

Sin embargo, cuando el navegador solicita ese archivo de fuente desde cdn.keywest.life , lee los encabezados de un encabezado Access-Control-Allow-Origin y no encuentra uno, por lo que da ese mensaje de error. (Esto me parece un error del navegador porque proviene del mismo servidor que el archivo CSS).

En cambio, cuando utiliza maxcdn.bootstrapcdn.com la respuesta incluye el encabezado Access-Control-Allow-Origin:* y el navegador acepta este archivo de fuente. Si su servidor cdn incluye este encabezado, entonces también funcionaría.

Si tiene un servidor Apache, vea esta respuesta: Font-awesome no se muestra correctamente en Firefox / ¿cómo vender a través de CDN?

Ninguna de las respuestas funcionó para mí, tuve que crear una regla de borde en Maxcnd Back Office (que cambia el archivo de configuración en tu zona)

Más información aquí

https://www.maxcdn.com/one/tutorial/edge-rules-recipes/ https://www.maxcdn.com/one/tutorial/create-a-rule/

Utilizo un CDN que no me permite modificar su respuesta, así que modifiqué font-awesome.min.css , reemplazando la ruta relativa con la ruta absoluta y funcionó.

Este problema de acceso a recursos fuente increíbles ha sido un problema para muchas personas sin una explicación exhaustiva y una resolución del problema.

Qué es CORS:

El Intercambio de recursos de origen cruzado (CORS) es un mecanismo que usa encabezados HTTP adicionales para permitir que un agente de usuario obtenga permiso para acceder a los recursos seleccionados desde un servidor en un origen (dominio) diferente que el sitio actualmente en uso. Un agente de usuario realiza una solicitud HTTP de origen cruzado cuando solicita un recurso de un dominio, protocolo o puerto diferente del que originó el documento actual.

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

El problema:

El problema radica en cómo se cargan las fonts fuente-impresionante.

 @font-face{ font-family:'FontAwesome'; src:url('../fonts/fontawesome-webfont.eot?v=4.2.0'); src:url('../fonts/fontawesome-webfont.eot?#iefix&v=4.2.0') format('embedded-opentype'),url('../fonts/fontawesome-webfont.woff?v=4.2.0') format('woff'),url('../fonts/fontawesome-webfont.ttf?v=4.2.0') format('truetype'),url('../fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular') format('svg'); font-weight:normal; font-style:normal } 

Las fonts se cargan a través de la hoja de estilo (CSS). La situación que tenemos aquí es:

Acceso a los activos web

La solución:

Si bien las reglas de CORS han sido creadas en su almacenamiento de archivos, por ejemplo S3, y el acceso al recurso ha sido otorgado al dominio en cuestión, cuando CDN intenta cargar las fonts especificadas en el CSS, el origen / dominio especificado al cargar estas fonts es el de el CDN pero no se ha otorgado acceso CORS al dominio CDN.

Crea una regla CORS para el dominio CDN.

    Intereting Posts