Porque se genera el error de CORS en su aplicación y cómo solucionarlo

El error CORS (Cross-Origin Resource Sharing) ocurre porque tu aplicación en localhost está intentando hacer una solicitud a una API en un dominio diferente, y el navegador bloquea la solicitud por razones de seguridad. Este bloqueo se implementa para evitar que scripts maliciosos en una página puedan acceder a recursos en otra.

Cuando ocurre un error CORS, generalmente es porque difiere el dominio configurado en la app de tu máquina con el dominio configurado en la app que está en tu servicio de alojamiento web.

Existen varias soluciones que se pueden aplicar. ¡Comencemos!

Configurar el servidor de la API para permitir CORS:

Si tienes control sobre la API, agrega los encabezados CORS necesarios para permitir solicitudes desde localhost.
El encabezado principal que se debe agregar es Access-Control-Allow-Origin, indicando el origen permitido.
Debes agregar estos encabezados tanto en la app de tu máquina como en la app de tu sitio web:

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Headers: *');
header('Access-Control-Allow-Credentials: *');

Con * estamos indicando que se aceptará absolutamente todo, cualquier tipo de pedido. Si no desea esto puede configurar el código especificando que debe aceptarse.

Utilizar un proxy:

  • Si no puedes modificar la API, puedes configurar un proxy en tu back-end o usar una herramienta que actúe como intermediario entre tu aplicación y la API externa. Esto permite que tu aplicación haga una solicitud al proxy en el mismo dominio o puerto, y el proxy luego envía la solicitud a la API externa.

  • Por ejemplo, si usas un framework como Express en Node.js, puedes crear un endpoint en tu servidor que reciba las solicitudes de la aplicación frontend y luego haga la llamada a la API externa.

Deshabilitar CORS en el navegador:

Deshabilitar CORS en el navegador es una solución que deberías usar únicamente para pruebas locales, ya que reduce la seguridad de las solicitudes en el navegador.

Chrome

Abrir Chrome en modo sin restricciones CORS:

  • Cierra todas las ventanas de Chrome.
  • Abre una nueva terminal o línea de comandos.
  • Ejecuta el siguiente comando según tu sistema operativo:
    • Windows:
      bash "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security --user-data-dir="C:\chrome_dev"
    • Mac:
      bash open -na "Google Chrome" --args --disable-web-security --user-data-dir="$HOME/chrome_dev"
    • Linux:
      bash google-chrome --disable-web-security --user-data-dir="$HOME/chrome_dev"
  • Esto abrirá Chrome en un modo sin restricciones CORS. Asegúrate de no usar esta ventana para navegar en producción, ya que desactiva la seguridad del navegador.

Usar una extensión (opcional y solo para desarrollo):

  • Existen extensiones como Allow CORS o CORS Unblock en la tienda de Chrome que permiten desactivar temporalmente CORS mientras trabajas en el entorno de desarrollo.
  • Nota: Usa estas extensiones solo para desarrollo local. Recuerda desactivarlas una vez termines.

Firefox

Modificar configuración de CORS en Firefox:

  • Abre Firefox.
  • Escribe about:config en la barra de direcciones y presiona Enter.
  • Acepta el mensaje de advertencia si aparece.
  • Busca security.fileuri.strict_origin_policy.
  • Haz doble clic en esta opción para cambiar su valor a false. Esto desactiva las restricciones CORS en archivos locales.
  • Nota: Esto no desactiva por completo CORS, pero puede permitir solicitudes CORS en algunos casos en desarrollo local.

Modo de desarrollo sin CORS (desde la terminal):

  • Abre una terminal y ejecuta el siguiente comando:
    • Windows:
      bash "C:\Program Files\Mozilla Firefox\firefox.exe" -private -devtools
    • Mac:
      bash open -na "Firefox" --args -private -devtools
  • Este modo es útil para pruebas en desarrollo, pero aún tendrás restricciones en entornos de producción.

Safari

Activar el Menú de Desarrollo (Developer Menu):

  • Abre Safari y ve a Safari > Preferencias en la barra de menús.
  • Dirígete a la pestaña Avanzado.
  • Marca la opción Mostrar el menú Desarrollo en la barra de menús. Esto habilitará el menú “Desarrollo” en la parte superior de Safari.

Desactivar las Restricciones CORS en Desarrollo:

  • Una vez que el menú “Desarrollo” está habilitado, ve a Desarrollo > Desactivar restricciones de CORS.
  • Esto permitirá que Safari realice solicitudes sin aplicar restricciones CORS.

Nota de Seguridad:

Estas configuraciones deben usarse solo para pruebas en un entorno de desarrollo local. No es recomendable mantener las restricciones desactivadas fuera de un entorno de desarrollo, ya que los navegadores estarán abiertos a solicitudes de diferentes orígenes, lo cual puede ser inseguro.

Al terminar tus pruebas, es importante volver al menú de desarrollo y activar las restricciones de CORS nuevamente para restaurar la seguridad en el navegador.

Estas soluciones deben usarse con precaución, especialmente fuera del entorno de desarrollo.

Editar su .htaccess:

Es posible que sea necesario colocar unas líneas en su archivo .htaccess para habilitar ciertas instancias en su sitio.

Diríjase al administrador de archivos de su panel de control, localice el archivo .htaccess y proceda a editarlo, agregando las siguientes líneas:

<IfModule mod_headers.c>
     Header set Access-Control-Allow-Origin "https://sudominio.tld"
     Header set Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS"
     Header set Access-Control-Allow-Headers "Content-Type"
 </IfModule>

Si te gustó este artículo, suscríbete a nuestro canal de YouTube  para videos tutoriales de Hosting, prácticas y demás. También puede encontrarnos en  Twitter, Facebook e Instagram.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *