¿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. Este sistema restringe las solicitudes HTTP que se realizan desde un script en ejecución en un dominio (origen) hacia un servidor ubicado en un dominio, protocolo o puerto diferente. Cuando intentas consumir una API externa o propia sin los encabezados adecuados, el navegador bloquea la respuesta y muestra el temido mensaje en la consola.
Causas principales del bloqueo CORS
Las causas más comunes por las que aparece esta excepción en el entorno de desarrollo incluyen:
- Realizar peticiones AJAX (usando
fetch()oaxios) desde un servidor local (ej.http://localhost:3000) a una API en otro puerto o dominio sin autorización. - Falta de los encabezados HTTP específicos de CORS en el servidor backend.
- Configuración incorrecta de credenciales o métodos permitidos (GET, POST, PUT, DELETE).
Método 1: Solucionar CORS en el servidor backend (Node.js con Express)
La forma más profesional y recomendada de solucionar CORS es configurando el servidor para que permita solicitudes desde tu origen de desarrollo. Si utilizas Node.js con Express, puedes implementar el middleware oficial.
- Instala el paquete
corsejecutando el siguiente comando en tu terminal:npm install cors - Abre el archivo principal de tu servidor (por ejemplo,
server.jsoapp.js). - Importa y añade el 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 un Proxy en el Frontend (Entorno de Desarrollo React/Vue)
Si no tienes acceso al código del servidor backend y estás trabajando con herramientas modernas de frontend como React (Create React App) o Vue CLI, puedes configurar un proxy de desarrollo para engañar al navegador.
- Si usas React, abre tu archivo
package.json. - Agrega la propiedad
proxyapuntando a la URL de tu API backend:"proxy": "http://localhost:5000" - Modifica tus peticiones en JavaScript para que apunten a la ruta relativa en lugar de la URL absoluta:
fetch('/api/data')en lugar defetch('http://localhost:5000/api/data').