¿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 un dominio hacia un servidor situado en un dominio diferente. Cuando tu aplicación frontend (por ejemplo, en http://localhost:3000) intenta consumir una API en otro servidor (como http://localhost:5000), el navegador bloquea la respuesta si el servidor de destino no incluye explícitamente los permisos necesarios en sus cabeceras HTTP.
Causas principales del bloqueo CORS
- Diferencia de puertos o dominios: El frontend y el backend se ejecutan en URLs distintas sin el consentimiento del servidor receptor.
- Falta de cabeceras de respuesta: El servidor API no devuelve las cabeceras CORS requeridas por la especificación W3C.
- Solicitudes con credenciales: Se envían cookies o encabezados de autorización (como Bearer tokens) sin configurar adecuadamente el parámetro de credenciales.
Método 1: Solucionar CORS en Node.js usando el paquete Express CORS
La forma más sencilla y recomendada de resolver este problema en un entorno de desarrollo con Node.js y Express es utilizando el middleware oficial cors. Sigue estos pasos para implementarlo:
- Abre tu terminal en la raíz del proyecto backend.
- Instala el paquete ejecutando el comando:
npm install cors - Abre tu archivo principal del servidor (por ejemplo,
app.jsoserver.js). - Importa y añade el middleware antes de definir tus rutas:
const express = require('express');
const cors = require('cors');
const app = express();
// Habilitar CORS para todas las solicitudes
app.use(cors());
app.get('/api/data', (req, res) => {
res.json({ message: '¡CORS solucionado con éxito!' });
});
app.listen(5000, () => console.log('Servidor corriendo en puerto 5000'));Método 2: Configurar CORS de forma manual mediante cabeceras HTTP nativas
Si no estás utilizando un framework como Express o prefieres configurar las cabeceras manualmente en Node.js puro, puedes interceptar la respuesta HTTP y añadir los headers correspondientes. Sigue estos pasos:
- Ubica la función o archivo que maneja las peticiones HTTP entrantes en tu servidor.
- Añade las cabeceras
Access-Control-Allow-Originantes de enviar la respuesta al cliente. - Asegúrate de permitir los métodos HTTP necesarios (GET, POST, PUT, DELETE, etc.).
const http = require('http');
const server = http.createServer((req, res) => {
// Permitir solicitudes desde cualquier origen (o especifica uno como 'http://localhost:3000')
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
if (req.method === 'OPTIONS') {
res.writeHead(204);
res.end();
return;
}
res.writeHead(200, { 'Content-Type': 'application/json' });
res.end(JSON.stringify({ data: 'Respuesta con CORS manual' }));
});
server.listen(5000);