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) es un mecanismo de seguridad implementado por los navegadores web modernos que restringe las solicitudes HTTP realizadas desde un script hacia un dominio diferente al que sirvió la página original. Esta política de mismo origen (Same-Origin Policy) protege a los usuarios contra ataques maliciosos, pero a menudo bloquea solicitudes legítimas entre tu frontend en React, Vue o JavaScript plano y tu backend en Node.js o Express.

Causas principales del bloqueo CORS

El bloqueo se produce cuando se cumplen las siguientes condiciones:

• El dominio, puerto o protocolo del cliente (frontend) es diferente al del servidor (backend).
• La petición incluye cabeceras personalizadas o métodos HTTP no estándar (como PUT, DELETE o PATCH) sin la autorización previa del servidor.
• El servidor backend no responde con las cabeceras HTTP específicas que permiten el acceso cruzado.

Método 1: Solucionar CORS en el servidor con Node.js y Express

La forma más rápida y recomendada de habilitar CORS en una aplicación de Node.js que utiliza Express es mediante el uso del paquete oficial cors.

1. Instala el paquete en tu proyecto ejecutando el siguiente comando en tu terminal: npm install cors
2. Importa y configura el middleware en tu archivo principal (ej. server.js o app.js):

const express = require('express');

const cors = require('cors');

const app = express();

app.use(cors());

app.listen(3000, () => { console.log('Servidor corriendo en puerto 3000'); });

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

Si estás en un entorno de producción, permitir el acceso a cualquier origen (*) puede representar un riesgo de seguridad. Debes restringir qué dominios pueden consumir tu API.

1. Modifica la configuración del middleware especificando un objeto de opciones:

const whitelist = ['https://tu-dominio-frontend.com', 'http://localhost:3001'];

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));

Método 3: Configurar cabeceras HTTP manuales sin librerías externas

Si no estás utilizando Express y estás construyendo un servidor HTTP nativo en Node.js, puedes añadir las cabeceras manualmente en cada respuesta:

1. Ubica la función que maneja las peticiones en tu servidor HTTP.
2. Añade las siguientes cabeceras antes de enviar la respuesta:

res.setHeader('Access-Control-Allow-Origin', '*');

res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');

res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');