Cómo Solucionar el Error CORS en JavaScript y APIs Paso a Paso

¿Qué es el Error CORS y por qué ocurre en JavaScript?

El error CORS (Cross-Origin Resource Sharing) es un mecanismo de seguridad implementado por los navegadores web modernos que restringe las peticiones HTTP realizadas desde un dominio (origen) hacia un servidor ubicado en un dominio diferente. Cuando intentas consumir una API externa utilizando JavaScript puro o librerías como Axios y el servidor no incluye las cabeceras HTTP adecuadas, el navegador bloquea la respuesta inmediatamente.

Este problema es extremadamente común en entornos de desarrollo local cuando, por ejemplo, tu aplicación frontend corre en http://localhost:3000 y realiza peticiones a un backend en http://localhost:5000. A continuación, te mostramos las causas principales y los métodos más efectivos para solucionarlo.

Causas Principales del Error CORS

• Ausencia de las cabeceras HTTP de control de acceso en el servidor de destino.
• Peticiones con credenciales (como cookies o tokens de autorización) bloqueadas por políticas estrictas de origen cruzado.
• Uso de métodos HTTP no permitidos (como PUT o DELETE) sin la debida aprobación mediante la petición previa de tipo OPTIONS (preflight request).

Método 1: Configurar las Cabeceras CORS en el Servidor (Backend)

La solución definitiva y recomendada para producción consiste en configurar el servidor backend para que permita explícitamente las solicitudes desde el origen de tu frontend. Si estás utilizando Node.js con Express, puedes hacerlo utilizando el paquete oficial de CORS.

1. Instala el paquete ejecutando el siguiente comando en tu terminal: npm install cors
2. Importa y habilita el middleware en tu archivo principal de servidor (por ejemplo, app.js o server.js):

const cors = require('cors');

const express = require('express');

const app = express();

app.use(cors()); // Permite todas las solicitudes de origen cruzado

Si necesitas restringir el acceso únicamente a tu dominio de producción, puedes configurarlo de la siguiente manera:

app.use(cors({ origin: 'https,://tudominio.com' }));

Método 2: Utilizar un Servidor Proxy en el Entorno de Desarrollo

Si no tienes acceso al código del servidor backend y estás sufriendo el bloqueo CORS mientras desarrollas localmente, una solución rápida es configurar un proxy inverso en tu entorno frontend.

1. Si utilizas React con Create React App, añade la propiedad proxy en tu archivo package.json:
   "proxy": "http://localhost:5000"
2. Si utilizas Vite, edita el archivo vite.config.js para redirigir las peticiones:
   server: { proxy: { '/api': { target: 'http://localhost:5000', changeOrigin: true } } }

Al hacer esto, las peticiones saldrán desde el mismo origen aparente y el navegador no activará el bloqueo CORS.

Método 3: Instalar una Extensión en el Navegador (Solo para Pruebas Rápidas)

Si necesitas verificar urgentemente si una API externa responde correctamente y no puedes modificar el código de inmediato, puedes utilizar temporalmente una extensión en tu navegador web.

1. Abre la tienda de extensiones de tu navegador (Chrome Web Store o Firefox Add-ons).
2. Busca e instala una extensión de deshabilitación de CORS, como CORS Unblock o Allow CORS: Access-Control-Allow-Origin.
3. Activa la extensión en tu barra de herramientas antes de recargar la página con la aplicación en ejecución.

Nota importante: Este último método es estrictamente para fines de depuración local y nunca debe considerarse una solución válida para entornos de producción, ya que dejará vulnerables las sesiones de navegación de los usuarios.