¿Cómo corregir los errores de CORS en WordPress? - Aprendermarketing.es/ - Aprender Marketing
WordPress

¿Cómo corregir los errores de CORS en WordPress? – Aprendermarketing.es/

¿Qué es CORS?

CORS significa intercambio de recursos de origen cruzado. De forma predeterminada, el navegador web permite todas las solicitudes que se originan en el mismo servidor utilizando una política de seguridad del mismo origen. Aquí está la definición exacta de la misma política de origen de Wikipedia:

De acuerdo con las reglas, el navegador web permite que los scripts contenidos en la primera página web accedan a los datos de la segunda página web, pero solo si ambas páginas web tienen el mismo origen.

Wikipedia

Ahora que puede comprender fácilmente el propósito del origen cruzado. Esto le permite cargar con éxito scripts y otros recursos desde otro dominio o servidor. A continuación se muestra una hermosa imagen de MDN explicación del concepto de consultas del mismo origen y consultas cruzadas.

Ejemplo de CORS y detección de errores

Digamos que abres una página https://sitio1.com/pagina1 que ha incorporado JavaScript y lo llama desde https://sitio2.com/pagina2CORS le dirá al navegador si la solicitud de inicio cruzado del sitio 2 está habilitada por el sitio 1. De lo contrario, el navegador bloqueará esta solicitud y mostrará los errores relacionados con CORS en la consola.

El mejor ejemplo de CORS es el uso de secuencias de comandos de anuncios de dominios de terceros en su sitio. Los navegadores como Chrome, Firefox, Safari y Edge bloquearán los scripts de anuncios si no habilita CORS en su servidor. Cuando vea un anuncio u otro resultado que no se carga en la página, haga clic con el botón derecho en la página y seleccione la opción «Comprobar». Esto abrirá la consola del desarrollador del navegador e irá a la sección «Consola».

Verá diferentes tipos de errores que muestran los códigos de estado 403, 401 o errores sin código de estado. Por ejemplo, a continuación se muestran los errores de la consola que aparecen en Google Chrome, y el error es claro: Acceso a XMLHttpRequest en «…» desde la fuente «„». . «Está bloqueado por la política CORS.» También puede ver el motivo del error, que indica que el encabezado «Access-Control-Allow-Origin» tiene un valor de «… ..» que no es igual a la fuente proporcionada. »

Error CORS en Google Chrome
Error CORS en Google Chrome

La misma página cuando se abre en el navegador Mac Safari mostrará varios errores, como se muestra a continuación. Indica el error como «Origin» «no está habilitado por Access-Control-Allow-Origin. Código de estado: 401». También puede ver errores como «XMLHttpRequest no se puede cargar»… «debido a comprobaciones de control de acceso».

Error del navegador CORS Safari
Error del navegador CORS Safari

Cada vez que vea errores de la consola relacionados con las comprobaciones de control de acceso, puede asumir con seguridad que están relacionados con un problema de CORS. Como resultado, el script no se cargará y no verá el anuncio ni el resultado esperado en la página.

Solucionar errores CORS en WordPress

Ahora que comprende qué es CORS y cómo encontrar errores relacionados en la consola del navegador. El siguiente paso es corregir el error para que su página se cargue en los navegadores sin errores. En pocas palabras, debe agregar el siguiente código al suyo. htaccess para permitir compartir recursos de diferentes fuentes en su servidor.

Access-Control-Allow-Origin: *

Hay tres formas diferentes de lograr esto dependiendo del escenario.

1. Permitir todos los sitios

Esta es la forma más común de resolver CORS. Si desea permitir cualquier solicitud de servidor de terceros en su sitio, agregue el siguiente código a su archivo htaccess. * utilizado como comodín para autorizar dominios de terceros.

<ifModule mod_headers.c>
Header set Access-Control-Allow-Origin: *
</ifModule>

2. Permitir un dominio específico

No se recomienda el método anterior, ya que cualquier secuestrador puede inyectar archivos de script maliciosos en su sitio y crear problemas. El enfoque correcto es permitir el intercambio entre fuentes solo desde el dominio que necesita. Puede reemplazar * con el nombre de dominio de la siguiente manera:

<ifModule mod_headers.c>
Header set Access-Control-Allow-Origin: https://site2.com
</ifModule>

Desafortunadamente, esto no es fácil de hacer, ya que necesita el cifrado del lado del servidor para verificar el dominio permitido en el control de acceso del encabezado. Por lo tanto, muchos usuarios de WordPress utilizan la opción №1, ya que no requiere codificación adicional.

3. Permitir archivos específicos de todos los servidores

La última opción es restringir el tipo de archivo que desea permitir de servidores de terceros.Para hacer esto, puede usar el siguiente código para especificar los tipos de archivo permitidos en su archivo htaccess.

<IfModule mod_headers.c>
  <FilesMatch ".(png|css|js)$">
    Header set Access-Control-Allow-Origin: *
  </FilesMatch>
</IfModule>

Este código permitirá imágenes PNG, archivos CSS y JS desde cualquier servidor. Puede agregar fuentes y otros tipos de archivos de imagen para permitirles CORS.

Otras Consideraciones

Hay algunas consideraciones adicionales que puede necesitar saber al permitir el uso compartido de recursos entre fuentes en WordPress.

  • Algunas empresas de alojamiento necesitan que deshabilite su almacenamiento en caché para que CORS funcione. Por ejemplo, si está en SiteGround, deberá deshabilitar la entrega directa de NGINX en la sección Herramientas del sitio> Velocidad> Caché.
  • Cuando utilice Cloudflare u otra CDN con una configuración de caché, es posible que deba borrar la caché por completo para reflejar los cambios del servidor de origen.
  • CORS también puede crear un problema al usar los protocolos HTTP y HTTPS. Esto generalmente aparecerá como un error de contenido mixto en la consola del navegador, y debe forzar HTTPS en su sitio para bloquear otros protocolos.
  • Otra consideración es el servicio de recursos estáticos y otros desde el subdominio al dominio principal. Esto funcionará perfectamente, ya que tanto el subdominio como el dominio principal suelen estar en el mismo servidor de origen. Sin embargo, esto también puede causar problemas según la configuración de su servidor. Puede resolver este problema mencionando explícitamente el subdominio, como se explicó anteriormente en la opción №2.

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

Botón volver arriba