Cómo Solucionar el Error de CORS en Node.js y Express de Forma Definitiva

Introducción al Error de CORS en Node.js

El error de CORS (Cross-Origin Resource Sharing) es uno de los problemas más comunes a los que se enfrentan los desarrolladores web al conectar un frontend (como React, Angular o Vue) con un backend en Node.js y Express. Este mecanismo de seguridad del navegador bloquea las peticiones realizadas desde un origen (dominio, puerto o protocolo) diferente al del servidor.

Causas Principales del Error CORS

Las causas de este fallo suelen estar relacionadas con:

• El servidor backend no incluye las cabeceras HTTP necesarias para permitir peticiones de origen cruzado.
• El navegador bloquea la respuesta debido a restricciones de seguridad predeterminadas.
• Se intenta enviar credenciales (como cookies o tokens de autorización) sin la configuración adecuada en el servidor.

Método 1: Instalar y Configurar el Paquete cors

La forma más rápida y recomendada de solucionar este problema en Express es utilizando el middleware oficial cors. Sigue estos pasos:

1. Abre tu terminal en la carpeta raíz del proyecto backend.
2. Instala el paquete ejecutando el comando: npm install cors
3. Abre tu archivo principal (por ejemplo, app.js o server.js).
4. Importa y habilita el middleware antes de definir tus rutas:

const express = require('express');
const cors = require('cors');
const app = express();

app.use(cors());

app.get('/api/data', (req, res) => {
  res.json({ message: '¡CORS solucionado!' });
});

app.listen(3000, () => console.log('Servidor corriendo'));

Método 2: Configurar Orígenes Específicos y Opciones Avanzadas

Para entornos de producción, es una mala práctica permitir el acceso a cualquier dominio (*). Debes restringir el acceso únicamente a tu frontend de confianza:

1. Define una lista blanca con los dominios permitidos.
2. Configura el middleware cors pasando un objeto de opciones:

const whitelist = ['https://tu-frontend.com', 'http://localhost:3000'];
const corsOptions = {
  origin: function (origin, callback) {
    if (whitelist.indexOf(origin) !== -1 || !origin) {
      callback(null, true);
    } else {
      callback(new Error('Bloqueado por la política CORS'));
    }
  }
};

app.use(cors(corsOptions));