¿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 el frontend hacia un dominio, puerto o protocolo distinto al del servidor de origen, previniendo así ataques maliciosos como el robo de datos.
Sin embargo, durante el desarrollo legítimo de aplicaciones web, este bloqueo suele convertirse en un dolor de cabeza frecuente al conectar una SPA (como React, Vue o Angular) con una API REST independiente (como Node.js, PHP o Python).
Causas principales del bloqueo por CORS
El navegador bloquea la respuesta del servidor cuando se cumplen las siguientes condiciones:
- El dominio, subdominio, puerto o esquema (HTTP/HTTPS) del cliente es diferente al de la API.
- La petición no incluye las cabeceras HTTP necesarias que autoricen el acceso desde otros orígenes.
- El servidor no responde correctamente a las solicitudes de tipo
OPTIONS(llamadas preflight o de comprobación previa). - Las credenciales (cookies o tokens de autenticación) se envían sin la configuración adecuada en ambos extremos.
Método 1: Solucionar CORS en el backend con Node.js y Express
La forma más rápida y recomendada de solucionar este problema en un servidor Node.js es utilizando el paquete oficial cors. Sigue estos pasos para configurarlo correctamente:
- Instala el paquete en tu proyecto ejecutando el siguiente comando en la terminal:
npm install cors - Importa y habilita el middleware en tu archivo principal de Express 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 solucionado con éxito!' });
});
app.listen(3000);Si necesitas restringir el acceso únicamente a tu dominio de producción, puedes configurar opciones avanzadas:
const corsOptions = {
origin: 'https://tu-sitio-web.com',
optionsSuccessStatus: 200
};
app.use(cors(corsOptions));Método 2: Configurar cabeceras HTTP manuales sin librerías externas
Si estás desarrollando una API sin frameworks o utilizando lenguajes como PHP puro, puedes configurar las cabeceras HTTP de respuesta de forma manual para permitir el acceso cruzado:
- Abre el archivo principal de tu API o el controlador que maneja las peticiones HTTP.
- Agrega las siguientes cabeceras al inicio de cada respuesta enviada al cliente:
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE");
header("Access-Control-Allow-Headers: Content-Type, Authorization");Asegúrate de interceptar las peticiones tipo OPTIONS y finalizar la ejecución con un código de estado 200, ya que los navegadores envían esta petición de prueba antes de realizar solicitudes complejos como POST o PUT.