¿Qué es el error CORS y por qué ocurre?
El error CORS (Cross-Origin Resource Sharing o Intercambio de Recursos de Origen Cruzado) es un mecanismo de seguridad implementado por los navegadores web. Este mecanismo restringe las solicitudes HTTP que se realizan desde scripts hacia un dominio diferente al que sirvió la página principal, protegiendo así a los usuarios contra ataques de falsificación de peticiones en sitios cruzados (CSRF).
Cuando intentas conectar tu frontend (por ejemplo, en http://localhost:3000) con una API backend (en http://localhost:5000), el navegador bloquea la respuesta por defecto si el servidor no incluye los encabezados HTTP adecuados que permitan explícitamente dicho origen.
Causas principales del bloqueo por CORS
- Falta de los encabezados
Access-Control-Allow-Originen las respuestas del servidor backend. - Intento de enviar credenciales (como cookies o tokens de autorización) sin la configuración requerida en el cliente y el servidor.
- Uso de métodos HTTP no permitidos (como PUT o DELETE) en solicitudes complejas que requieren una petición previa de tipo
OPTIONS(preflight request).
Método 1: Solucionar CORS en Node.js usando el paquete Express CORS
Si tu backend está desarrollado en Node.js utilizando Express, la forma más rápida y recomendada de solucionar este problema es instalando y configurando el middleware oficial cors.
- Abre tu terminal en la carpeta del proyecto backend y ejecuta el siguiente comando para instalar la dependencia:
npm install cors - Abre tu archivo principal de configuración (por ejemplo,
app.jsoserver.js). - Importa el paquete y habilítalo en tu aplicación antes de definir tus rutas:
const express = require('express');
const cors = require('cors');
const app = express();
// Habilitar CORS para todas las rutas
app.use(cors());
app.get('/api/data', (req, res) => {
res.json({ message: '¡CORS configurado correctamente!' });
});
app.listen(5000, () => console.log('Servidor corriendo en puerto 5000'));Método 2: Configurar encabezados CORS manualmente en servidores personalizados
Si no estás utilizando un framework como Express y prefieres configurar los encabezados de forma nativa en Node.js, puedes interceptar las peticiones HTTP y agregar manualmente los headers necesarios.
- Ubica la función que maneja las peticiones en tu servidor HTTP nativo.
- Agrega los siguientes encabezados en la respuesta del servidor para permitir solicitudes desde cualquier origen:
const http = require('http');
const server = http.createServer((req, res) => {
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, DELETE');
res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
if (req.method === 'OPTIONS') {
res.writeHead(204);
res.end();
return;
}
res.writeHead(200, { 'Content-Type': 'application/json' });
res.end(JSON.stringify({ data: 'Respuesta exitosa' }));
});
server.listen(5000);Conclusión
El error CORS es un obstáculo común pero fácil de superar cuando se comprende el modelo de seguridad del navegador. Al habilitar los middlewares correspondientes en tu backend o configurar adecuadamente los encabezados HTTP, permitirás una comunicación fluida y segura entre tus servicios web.