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 en el Desarrollo Web?

El error CORS (Cross-Origin Resource Sharing o Intercambio de Recursos de Origen Cruzado) es un mecanismo de seguridad implementado por los navegadores web modernos. Este mecanismo restringe las solicitudes HTTP realizadas desde scripts hacia un dominio diferente al que sirvió la página original, previniendo ataques de falsificación de peticiones en sitios cruzados (CSRF).

Cuando intentas consumir una API desde un frontend alojado en http://localhost:3000 hacia un backend en http://localhost:5000, el navegador bloquea la respuesta y muestra un mensaje en la consola similar a: Access to fetch at 'http://localhost:5000/api' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Causas Principales del Bloqueo CORS

Las causas más comunes por las cuales se activa esta política de seguridad restrictiva en el desarrollo de software incluyen:

• El servidor backend no incluye las cabeceras HTTP necesarias para autorizar el origen de la solicitud.
• Se intenta enviar credenciales (como cookies o tokens de autorización) sin la configuración adecuada en el cliente y en el servidor.
• Peticiones con métodos HTTP no seguros (como PUT, DELETE o cabeceras personalizadas) que requieren una solicitud previa de tipo OPTIONS (preflight request) la cual es rechazada por el servidor.

Método 1: Solucionar CORS en Node.js usando Express (Recomendado)

La forma más sencilla y estandarizada de resolver este problema en un entorno de Node.js con Express es utilizando el middleware oficial cors. Sigue estos pasos para implementarlo:

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

const express = require('express');
const cors = require('cors');
const app = express();
app.use(cors());
// Tus rutas aquí
app.listen(5000, () => console.log('Servidor corriendo en puerto 5000'));

Método 2: Configuración Avanzada de CORS para Producción

Habilitar CORS de forma global con app.use(cors()) permite el acceso desde cualquier origen, lo cual puede ser inseguro en entornos de producción. Para restringir el acceso únicamente a tu dominio autorizado, debes configurar un objeto de opciones:

1. Define la lista blanca de dominios permitidos en tu código backend:

const whitelist = ['https://tudominio.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'));
}
}
};

1. Aplica las opciones personalizadas en tu aplicación Express:

app.use(cors(corsOptions));

Método 3: Configurar Cabeceras HTTP Manualmente sin Librerías

Si estás desarrollando un servidor nativo en Node.js sin frameworks como Express, puedes añadir las cabeceras HTTP de control de acceso manualmente en cada respuesta:

1. Ubica la función que maneja las solicitudes de tu servidor HTTP nativo.
2. Añade las siguientes cabeceras en el objeto de respuesta antes de enviar los datos:

res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000');
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, DELETE');
res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');