Cómo Solucionar el Error CORS (Cross-Origin Resource Sharing) en JavaScript y Node.js Paso a Paso

¿Qué es el error CORS y por qué ocurre?

El error CORS (Cross-Origin Resource Sharing) es un mecanismo de seguridad implementado por los navegadores web modernos que restringe las solicitudes HTTP realizadas desde un dominio (origen) hacia un servidor ubicado en un dominio diferente. Por ejemplo, si tu frontend corre en http://localhost:3000 y tu API en http://localhost:5000, el navegador bloqueará la respuesta por defecto a menos que el servidor especifique explícitamente que permite peticiones de ese origen.

Este problema es muy común en etapas de desarrollo y producción cuando se separan los servicios del cliente y del servidor. A continuación, te mostramos las causas principales y cómo solucionarlo paso a paso.

Causas principales del bloqueo por CORS

• El servidor backend no incluye las cabeceras HTTP necesarias (como Access-Control-Allow-Origin).
• Se intentan enviar credenciales (cookies o cabeceras de autorización) sin la configuración adecuada en ambos extremos.
• El navegador bloquea solicitudes pre-flight (método OPTIONS) porque el servidor no las responde correctamente.

Método 1: Solucionar CORS en Node.js usando el paquete Express CORS

Si estás desarrollando tu backend utilizando Node.js y Express, la forma más rápida y recomendada de solucionar este problema es utilizando el middleware oficial cors.

1. Abre tu terminal en la carpeta del proyecto backend e instala el paquete ejecutando el siguiente comando:
   npm install cors
2. Abre tu archivo principal del servidor (por lo general app.js o server.js).
3. Importa y configura el middleware antes de definir tus rutas:
   const express = require('express');
const cors = require('cors');
const app = express();
app.use(cors());
4. Reinicia tu servidor Node.js y recarga tu aplicación frontend. El error debería haber desaparecido.

Método 2: Configurar CORS de forma personalizada y segura para Producción

Permitir el acceso a cualquier dominio usando app.use(cors()) puede ser peligroso en entornos de producción. Es recomendable restringir el acceso únicamente a tu dominio autorizado.

1. Modifica la configuración de CORS en tu archivo de Express especificando un objeto de opciones:
   const whitelist = ['https://tu-dominio-frontend.com'];
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));
2. Guarda los cambios y despliega tu backend con la nueva configuración de seguridad estricta.