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. Su función principal es restringir las solicitudes HTTP que se realizan desde un script ejecutado en el frontend hacia un dominio, puerto o protocolo diferente al del servidor de origen.

Cuando desarrollas aplicaciones web separadas (por ejemplo, un frontend en React ejecutándose en http://localhost:3000 y un backend en Node.js/Express en http://localhost:5000), el navegador bloquea automáticamente la respuesta si el servidor no incluye las cabeceras HTTP adecuadas que permitan explícitamente ese origen.

Causas principales del bloqueo CORS

• El servidor backend no incluye las cabeceras Access-Control-Allow-Origin en sus respuestas HTTP.
• Se intenta enviar credenciales (como cookies o tokens de autorización) sin la configuración requerida en el cliente y el servidor.
• El navegador bloquea solicitudes de tipo preflight (métodos HTTP como PUT, DELETE o con cabeceras personalizadas) porque el servidor no responde correctamente al método OPTIONS.

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

La forma más rápida y recomendada de habilitar CORS en una aplicación de Node.js utilizando el framework Express es mediante el middleware oficial cors.

1. Instala el paquete ejecutando el siguiente comando en tu terminal dentro de la carpeta del proyecto:
   npm install cors
2. Abre tu archivo principal de servidor (por ejemplo, server.js o app.js) e importa el módulo:

const cors = require('cors');

const express = require('express');

const app = express();

3. Configura y añade el middleware antes de definir tus rutas para permitir el acceso global:

app.use(cors());

O bien, si deseas restringir el acceso únicamente a un dominio de frontend específico por seguridad:

const corsOptions = { origin: 'http://localhost:3000' };

app.use(cors(corsOptions));

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

Si estás construyendo un servidor web nativo en Node.js sin frameworks como Express, puedes configurar manualmente las cabeceras de respuesta HTTP para autorizar los orígenes cruzados.

1. Localiza el archivo donde manejas las solicitudes del servidor HTTP.
2. Añade las siguientes cabeceras en cada respuesta saliente antes de enviar los datos al cliente:

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

res.setHeader('Access-Control-Allow-Credentials', true);

Método 3: Configurar el cliente JavaScript (Fetch API o Axios)

Asegúrate de que tus peticiones desde el navegador estén configuradas correctamente para evitar malentendidos con las políticas de origen cruzado.

1. Si realizas solicitudes utilizando fetch y necesitas enviar cookies o cabeceras de autorización, debes incluir la propiedad credentials:

fetch('https://api.tudominio.com/datos', { method: 'GET', credentials: 'include' })

2. Verifica que la URL a la que llamas en tu código de JavaScript coincida exactamente con el protocolo (http vs https) y puerto configurados en tu servidor backend.