Cómo Solucionar el Error CORS 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 que restringe las solicitudes HTTP realizadas desde un dominio (origen) hacia un servidor ubicado en un dominio diferente. Cuando intentas consumir una API desde tu aplicación frontend en http://localhost:3000 hacia un backend en http://localhost:5000, el navegador bloquea la respuesta si el servidor no incluye los encabezados HTTP adecuados.

Causas principales del bloqueo CORS

• El servidor backend no está configurado para permitir solicitudes de orígenes externos.
• Faltan los encabezados HTTP esenciales como Access-Control-Allow-Origin.
• Intento de enviar credenciales (cookies o tokens de autorización) sin la configuración previa en el cliente y servidor.
• Métodos HTTP no permitidos (como PUT o DELETE) en las solicitudes de tipo preflight (OPTIONS).

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

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

1. Abre tu terminal en la raíz del proyecto backend e instala el paquete ejecutando el comando: npm install cors
2. Abre el archivo principal de tu servidor (por ejemplo, server.js o app.js).
3. Importa el paquete y actívalo como middleware antes de definir tus rutas:

const express = require('express');
const cors = require('cors');
const app = express();
app.use(cors());

Si necesitas mayor seguridad permitiendo únicamente a un dominio específico acceder a tu API, puedes configurar el middleware de la siguiente manera:

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

Método 2: Configurar encabezados HTTP manualmente sin librerías externas

Si no estás utilizando un framework como Express y manejas solicitudes HTTP nativas en Node.js, puedes añadir los encabezados de control de acceso directamente en la respuesta del servidor.

1. Localiza la función que maneja las solicitudes HTTP en tu servidor.
2. Añade los siguientes encabezados antes de enviar la respuesta 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 correctamente las peticiones de sondeo previo (método OPTIONS) devolviendo un código de estado 204 para evitar que el navegador cancele la petición principal.