• +34 - 607 571 659
  • info@oscarperez.es

Cómo solucionar el error Access-Control-Allow-Origin (origen CORS) para WordPress con HTTPS

Cómo solucionar el error Access-Control-Allow-Origin (origen CORS) para WordPress con HTTPS

El siguiente problema me ocurrió cuando en una web, decidí que en lugar de ir a Google Fonts a buscar las fuentes, con el típico import

@import url('https://fonts.googleapis.com/css?family=Ubuntu)
@import url('https://fonts.googleapis.com/css?family=Marvel)

me las descargaría en mi instalación y usarlas con reglas css sin tener que acceder al servidor de Google cada vez que se carga la wbe

@font-face { font-family: "Ubuntu"; src: url("fonts/Ubuntu-Regular.ttf") }
@font-face { font-family: "Marvel"; src: url("fonts/Marvel-Regular.ttf") }
@font-face { font-family: "Marvel-Italic"; src: url("fonts/Marvel-Italic.ttf") }

Para descarga una fuente de Google fonts, sólo hay que hacer click en el icono de descarga

 

Me cree un directorio llamado fonts en mi instalación de WordPress y me descargé los dos tipos de fuentes que necesitaba: Marvel y Ubuntu

¿Por que hice esto? os preguntareis, (“si funciona, no se toca”).  Por la nueva RGPD (Reglamento General de Protección de Datos). Resulta que ahora, y me parece bien, hay que informar de todas las cookies y más cosas que se cargan en el navegador de un usuario cuando accede a nuestra web. Pues resulta que cada vez que accedes a Google Fonts, estás compartiendo la IP con Google. ¡Vaya!, ¡y yo sin saberlo!.

A lo que iba. Pues si todo va bien, y en la declaración de la regla ccs la url es correcta, todo se verá tal como querías.

Se carga la página principal y todo es correcto. Las fuentes se cargan perfectamente y la web se ve tal como yo quiero. El problema sucedió cuando comenzé a navegar por la web, y algunas páginas no cargaban correctamente las fuentes, y la Consola de Chrome mostraba los siguientes errores:

¡WTF! ¿Que es eso de CORS?

Bueno, pues a investigar que es eso de las CORS y los problemas que pueden ocasionar (developer.mozilla.org). En resumen, que por razones de seguridad, los exploradores restringen las solicitudes HTTP de origen cruzado.

Hace algunos días también instalé un certificado digital por lo que la navegación se realiza a través de https

¿Como solucionar esto?.

  1. Lo mejor, es buscar en tu instalación de WordPress, todos los enlaces que tengas a entradas o páginas de la propia web a través de http.
  2. ¿Que no podemos, por que nuestro WordPress tiene mucha “chicha” y nos llevará algo de tiempo?. Pues toca modifcar el archivo .htaccess

Editamos el fichero .htaccess de nuestra instalación de WordPress y añadimos al final las siguientes lineas

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

Como ves, Access-Control-Allow-Origin "*" permite acceder a todos los recursos y webfonts de todos los dominios.

Lo que te recomiendo es que, aunque con el paso 2 se haya solucionado el error, comprobéis cuales son las páginas que fallan e ir cambiando los enlaces de http a https. Debeis de planificar esta tarea para que no se os olvide.

Oscar Pérez Gómez