¿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 es restringir las solicitudes HTTP que se realizan desde un script ejecutado en el frontend hacia un dominio, puerto o protocolo diferente al del servidor de origen.
Cuando intentas conectar una aplicación de React, Vue o JavaScript plano (fetch) con una API backend alojada en un servidor distinto sin los permisos adecuados, el navegador bloquea la respuesta y muestra el temido mensaje en la consola: Access to fetch at '...' from origin '...' has been blocked by CORS policy.
Causas principales del bloqueo CORS
- El servidor backend no incluye las cabeceras HTTP necesarias (como
Access-Control-Allow-Origin). - Intentar realizar peticiones con credenciales (cookies o tokens de autorización) sin la configuración adecuada en el cliente y el servidor.
- Métodos HTTP no permitidos (por ejemplo, enviar un método
PUToDELETEcuando el servidor solo aceptaGEToPOST).
Método 1: Solucionar CORS en Node.js usando el paquete Express CORS
Si tu API está desarrollada en Node.js utilizando Express, la forma más sencilla y recomendada de habilitar CORS es mediante el paquete oficial cors.
- Instala el paquete en tu proyecto ejecutando el siguiente comando en tu terminal:
npm install cors - Abre tu archivo principal del servidor (por ejemplo,
server.jsoapp.js). - Importa el módulo e intégralo como un middleware global 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 configurado con éxito!' });
);
app.listen(3000, () => console.log('Servidor corriendo en puerto 3000'));Método 2: Configurar CORS personalizado para entornos de producción
En un entorno de producción real, no es seguro permitir solicitudes desde cualquier origen (usando un asterisco *). Debes limitar el acceso únicamente a los dominios autorizados.
- Modifica la configuración de tu middleware
corsen Express especificando un objeto de opciones:
const whitelist = ['https://tudominio.com', 'https://otrodominio.com'];
const corsOptions = {
origin: function (origin, callback) {
if (whitelist.indexOf(origin) !== -1 || !origin) {
callback(null, true);
} else {
callback(new Error('Bloqueado por la política CORS'));
}
}
};
app.use(cors(corsOptions));Método 3: Configurar cabeceras CORS de forma manual sin librerías externas
Si estás creando un servidor nativo en Node.js sin frameworks como Express, puedes añadir las cabeceras HTTP manualmente en la respuesta de cada petición.
- Localiza el punto donde tu servidor procesa las peticiones HTTP y envía las siguientes cabeceras:
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(8080);Siguiendo estos pasos, podrás eliminar por completo los errores de origen cruzado y garantizar una comunicación fluida y segura entre tu frontend y tu backend.