¿Qué es el error CORS y por qué ocurre?
El error 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 servidor ubicado en un dominio diferente. Cuando intentas consumir una API externa o un backend en un puerto distinto sin la configuración adecuada, el navegador bloquea la respuesta y muestra el temido error en la consola de JavaScript.
Causas principales del bloqueo CORS
Las razones más comunes por las que aparece este fallo en el desarrollo diario incluyen:
- Falta de cabeceras HTTP de control de acceso en el servidor de destino (como
Access-Control-Allow-Origin). - Intento de realizar peticiones AJAX o Fetch desde
localhosta un servidor de producción sin el permiso explícito. - Configuración incorrecta de credenciales o métodos HTTP permitidos (como PUT o DELETE).
Método 1: Configurar las cabeceras CORS en el Servidor (Node.js / Express)
La forma más limpia y profesional de solucionar CORS es habilitar los permisos directamente en el servidor backend. Si utilizas Node.js con Express, puedes instalar el paquete oficial y configurarlo en tu archivo principal:
- Instala el paquete ejecutando:
npm install cors - Importa y utiliza el middleware en tu aplicación:
const express = require('express');const cors = require('cors');const app = express();app.use(cors());app.listen(3000, () => console.log('Servidor corriendo con CORS habilitado'));
Método 2: Utilizar un Proxy inverso durante el Desarrollo
Si no tienes acceso al código del servidor backend para modificar las cabeceras, puedes evitar el bloqueo CORS configurando un proxy en tu herramienta de desarrollo local. Por ejemplo, en proyectos basados en React con create-react-app o configuraciones de Vite, puedes añadir la propiedad proxy en tu archivo package.json o vite.config.js para redirigir las peticiones locales como si vinieran del mismo origen.