Cómo Solucionar el Error CORS en Node.js Definitivamente

Cómo Solucionar el Error CORS en Node.js Definitivamente
Anuncio relacionado

¿Qué es el Error CORS y por qué ocurre en Node.js?

El error CORS (Cross-Origin Resource Sharing) es un mecanismo de seguridad implementado por los navegadores web que restringe las solicitudes HTTP realizadas desde un dominio (origen) hacia un servidor ubicado en un dominio diferente. Cuando desarrollas una API en Node.js con Express y tu frontend se encuentra en otro puerto o dominio, el navegador bloquea la respuesta por defecto.

Causas principales del bloqueo por CORS

  • Ausencia de cabeceras HTTP de control de acceso en las respuestas del servidor.
  • Intentar consumir una API desde un dominio, subdominio o puerto diferente sin autorización previa.
  • Configuración restrictiva en el middleware de seguridad del backend.

Método 1: Instalar y configurar el paquete cors en Express

La forma más rápida y recomendada de solucionar este problema en Node.js es utilizando el paquete oficial cors. Sigue estos pasos para implementarlo:

  1. Abre tu terminal en la raíz del proyecto backend.
  2. Ejecuta el comando de instalación: npm install cors
  3. Abre tu archivo principal (por ejemplo, app.js o server.js).
  4. Importa y añade el middleware antes de definir tus rutas:

const cors = require('cors');

const app = express();

app.use(cors());

Método 2: Configurar orígenes específicos por seguridad

Si estás en un entorno de producción, habilitar CORS para cualquier origen puede ser un riesgo de seguridad. Es recomendable limitar el acceso únicamente a tu dominio frontend autorizado:

  1. Define las opciones de configuración con una lista blanca de dominios permitidos.
  2. Aplica el middleware pasando el objeto de configuración:

const whitelist = ['https://tufrontendsitio.com'];

const corsOptions = { origin: function (origin, callback) { if (whitelist.indexOf(origin) !== -1 || !origin) { callback(null, true); } else { callback(new Error('Bloqueado por política CORS')); } } };

app.use(cors(corsOptions));

Método 3: Configurar cabeceras HTTP manualmente (Sin librerías)

Si prefieres no instalar dependencias externas, puedes configurar manualmente los headers permitidos creando un middleware personalizado:

  1. Crea un archivo de middleware para interceptar las peticiones.
  2. Añade las cabeceras correspondientes para permitir métodos y credenciales:

app.use((req, res, next) => { res.header('Access-Control-Allow-Origin', '*'); res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept, Authorization'); res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS'); next(); });

Anuncio
Seguir Leyendo

Guías y Soluciones Relacionadas

Windows Apps Juegos
WordPress

Cómo Solucionar el Error Estableciendo una Conexión con la Base de Datos en WordPress Definitivamente

El temido error de conexión a la base de datos en WordPress bloquea tu sitio web por completo. Descubre cómo identificar la causa y solucionarlo rápidamente.

Leer guía completa →
Desarrollo

Cómo Solucionar el Error de CORS en JavaScript y APIs de Forma Definitiva

Descubre por qué ocurre la política de mismo origen y cómo solucionarla en tus aplicaciones web modernas paso a paso.

Leer guía completa →
Windows

Cómo Solucionar el Error DNS Server Not Responding en Windows Definitivamente

Aprende a solucionar el molesto error de red en Windows cuando el servidor DNS no responde. Guía práctica con métodos efectivos.

Leer guía completa →