¿Por qué algunos íconos de FontAwesom no se cargan después de implementar en Heroku?
Estoy trabajando en un proyecto de React y he utilizado iconos de FontAwesome en él. Todos los iconos eran visibles cuando los usaba en localhost, pero ahora lo he desplegado en heroku.com. Ahora algunos de los iconos no son visibles para mí.
He notado que los iconos cuyos nombres empiezan con “fa fa” son visibles, pero los nombres de los iconos que empiezan con “fab” u otros no lo son. Incluso he incluido el enlace del script de ambas listas de iconos, y funcionan perfectamente bien en el servidor localhost.
Después de desplegarlo, estoy obteniendo el siguiente error en la consola por no obtener esos iconos:
Se ha bloqueado el acceso al script en 'https://kit.fontawesome.com/a076d05399.js' desde el origen 'https://tajarat.herokuapp.com' debido a la política de CORS: No se encuentra presente la cabecera 'Access-Control-Allow-Origin' en el recurso solicitado.
davy.ai
Solución
El mensaje de error sugiere que el script de fontawesome al que estás intentando acceder está siendo bloqueado debido a la política de CORS. Para solucionar esto, deberás configurar tu servidor para permitir solicitudes de origen cruzado desde el dominio donde se encuentra alojado el script de fontawesome.
Una solución es añadir el siguiente encabezado a la respuesta del script de fontawesome:
Esto permitirá que cualquier dominio acceda al script de fontawesome. Otra solución es añadir el dominio donde se encuentra alojado tu proyecto reemplazando el
*por el nombre del dominio:Una vez que hayas añadido el encabezado al script de fontawesome, los iconos deberían ser visibles en tu sitio web desplegado.