Introducción al Error CORS en el Desarrollo Web
Uno de los dolores de cabeza más comunes para los desarrolladores frontend y backend es el famoso error CORS (Cross-Origin Resource Sharing). Este bloqueo ocurre cuando una aplicación web ejecutada en un dominio realiza una solicitud HTTP a un dominio, puerto o protocolo diferente. Por seguridad, los navegadores modernos bloquean estas solicitudes por defecto, interrumpiendo la comunicación con tu API.
¿Cuáles son las Causas Principales del Error CORS?
El mecanismo de seguridad de política de mismo origen (Same-Origin Policy) restringe cómo un documento o script cargado por un origen puede interactuar con un recurso de otro origen. Las causas más frecuentes incluyen:
- Intentar consumir una API desde
http://localhost:3000hacia un servidor enhttp://localhost:5000. - Falta de cabeceras HTTP de control de acceso en el servidor backend.
- Configuración incorrecta de credenciales o métodos permitidos (GET, POST, PUT, DELETE) en las peticiones.
Método 1: Solucionar CORS en Node.js usando el paquete Express CORS
La forma más sencilla de habilitar CORS en un servidor backend construido 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 (ej.
server.jsoapp.js). - Importa y añade el middleware antes de definir tus rutas con el siguiente código:
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 con éxito!' });
);
app.listen(5000, () => console.log('Servidor corriendo en puerto 5000'));Método 2: Configurar Cabeceras HTTP Manualmente sin Librerías
Si no estás utilizando Express o prefieres configurar las cabeceras HTTP de forma manual en Node.js puro, puedes interceptar las peticiones mediante un middleware personalizado.
- Localiza el archivo donde configuras el servidor HTTP.
- Añade un interceptor para configurar las cabeceras
Access-Control-Allow-Origin. - Implementa el siguiente bloque de código en tu respuesta:
const http = require('http');
const server = http.createServer((req, res) => {
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Methods', 'OPTIONS, GET, POST');
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({ status: 'OK' }));
);
server.listen(3000);