¿Qué es el error de CORS Policy y por qué ocurre?
El error de 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 dominio diferente. Cuando desarrollas aplicaciones web separadas, es muy común que tu frontend (por ejemplo, en http://localhost:3000) intente comunicarse con tu API (en http://localhost:5000), provocando que el navegador bloquee la respuesta por motivos de seguridad.
Causas principales del bloqueo CORS
Las causas más frecuentes de este problema en entornos de desarrollo y producción son:
- Falta de cabeceras HTTP de control de acceso en el servidor backend.
- Intento de consumir una API desde un origen (dominio, protocolo o puerto) no autorizado.
- Configuración incorrecta o ausencia del middleware CORS en servidores basados en Node.js y Express.
- Solicitudes con credenciales (cookies o cabeceras de autorización) no permitidas explícitamente.
Método 1: Solucionar CORS en Node.js usando el paquete Express CORS
La forma más rápida y recomendada de solucionar este error en una API de Node.js con Express es utilizando el paquete oficial cors.
- Instala el paquete en la raíz de tu proyecto ejecutando el siguiente comando en tu terminal:
npm install cors - Abre el archivo principal de tu servidor (por ejemplo,
server.jsoapp.js). - Importa el paquete y actívalo como middleware antes de definir tus rutas:
const express = require('express');
const cors = require('cors');
const app = express();
// Habilitar CORS para todas las peticiones
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 orígenes específicos por seguridad en producción
Permitir el acceso desde cualquier origen (*) puede representar un riesgo de seguridad en entornos de producción. Es aconsejable restringir qué dominios pueden consumir tu API.
- Modifica la configuración del middleware CORS pasando un objeto de opciones con la propiedad
origin. - Especifica la URL exacta de tu frontend permitida.
- Ejemplo de implementación avanzada en Express:
const corsOptions = {
origin: 'https://tu-dominio-frontend.com',
optionsSuccessStatus: 200
};
app.use(cors(corsOptions));Método 3: Configuración manual de cabeceras HTTP sin librerías externas
Si estás construyendo un servidor web nativo en Node.js sin utilizar Express, puedes añadir manualmente las cabeceras necesarias directamente en la respuesta HTTP.
- Localiza el punto donde tu servidor recibe y responde a las peticiones HTTP.
- Añade las cabeceras
Access-Control-Allow-Originen el objeto de respuesta. - Ejemplo de código nativo:
const http = require('http');
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');
res.writeHead(200, { 'Content-Type': 'application/json' });
res.end(JSON.stringify({ data: 'Respuesta con cabeceras CORS manuales' }));
}).listen(5000);