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

Author Archive Oscar Pérez Gómez

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.

Galeria Artesonado

Url: http://www.galeriartesonado.es/

El diseño de la página ya estaba realizado, así que mi trabajo fué maquetar la página y programar el website usando tecnología PHP y Mysql como base de datos.

El CMS también es propio.

Está online desde 2011.

Webdelagranja.com

Página personal sobre mi pueblo, Real Sitio de San Ildefonso. Está online desde 2006 y ahora, en el 2016, llegó el momento de rejuvenecerla.

En esta web se refleja toda (o casi toda) la información referente al pueblo de La Granja de San Ildefonso (Segovia). Este es el pueblo donde nací y crecí, y mi única intención es dar a conocer mi pueblo y las noticias referidas a él, ya sea para el turista que quiera visitarnos como para el vecino que quiera conocer las actividades y noticias que se producen en La Granja

La tecnología usada en l aprimera versión fué Php, Mysql, Html, Css, Javascript, Ajax y el CMS también era propio y desarrollado por mí.

El CMS, al ser propio, le aporta a esta web las funcionalidades necesarias para mostrar la información tal como yo quiero, las cuales no venían reflejadas en los CMS más comunes usados en aquellos años en el desarrollo web (WordPress, Joomla, Drupal). Otro de los motivos para no usar un CMS fué que está web la estaba manteniendo yo mismo, con lo cual, no necesitaba un CMS que me facilite la publicación de nueva información.

Pero, al hacer la nueva versión, evalué las necesidades y decidí usar WordPress para ello.

La he renovado en octubre del 2016 y he usado como CMS WordPress, y como tecnologías de diseño y programación Php, Mysql, Html5, Css3, Javascript, jQuery, Ajax, adaptando el diseño para dispositivos móviles. Adapté un tema de wordpress y para algunas funcionalidades programé plugins propios para guardar información en la base de datos y después mostrarla en la web.

12