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 acrónimo CORS responde a Cross-Origin Resource Sharing (Intercambio de Recursos de Origen Cruzado). Se trata de un mecanismo de seguridad implementado por los navegadores web modernos que restringe las solicitudes HTTP realizadas desde scripts hacia un dominio diferente al de origen. Cuando intentas conectar una aplicación de frontend (por ejemplo, en http://localhost:3000) con una API backend (en http://localhost:5000), el navegador bloquea la respuesta si el servidor no incluye los encabezados HTTP adecuados autorizando dicha conexión.

Causas principales del bloqueo CORS

• Diferencia de puertos o dominios: El navegador considera que dos URLs tienen origenes distintos si cambian el protocolo (http/https), el dominio o el puerto.
• Falta de cabeceras en el servidor: El servidor backend no responde con las cabeceras requeridas como Access-Control-Allow-Origin.
• Peticiones con credenciales: Enviar cookies o cabeceras de autorización (Authorization headers) sin la configuración explícita en el servidor y el cliente.

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

La forma más rápida y recomendada si utilizas Express.js en tu backend es instalar y configurar el middleware oficial de CORS.

1. Abre tu terminal en la carpeta del proyecto backend y ejecuta el siguiente comando para instalar el paquete:
   npm install cors
2. Abre tu archivo principal del servidor (por ejemplo, app.js o server.js) e importa el módulo:
3. const cors = require('cors');
4. Añade el middleware antes de definir tus rutas para permitir solicitudes desde cualquier origen:
   app.use(cors());
5. Si deseas restringir el acceso únicamente a tu dominio de producción, configura las opciones de la siguiente manera:

const corsOptions = { origin: 'https://tusitio.com', optionsSuccessStatus: 200 }; app.use(cors(corsOptions));

Método 2: Configurar encabezados HTTP manualmente en Node.js sin librerías

Si estás construyendo una API nativa utilizando únicamente el módulo HTTP de Node.js sin frameworks externos, debes interceptar cada petición y añadir las cabeceras manualmente.

1. Localiza el archivo donde manejas las respuestas HTTP de tu servidor.
2. Agrega los siguientes encabezados en la respuesta (Response) 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);

Asegúrate de manejar adecuadamente las peticiones pre-vuelo (preflight requests) del método OPTIONS devolviendo un código de estado 204 para evitar que el navegador rechace la solicitud principal.