¿Qué es el error CORS y por qué ocurre en JavaScript?
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 realizadas desde scripts hacia un dominio diferente al que sirvió la página original, protegiendo así a los usuarios contra ataques maliciosos como el robo de datos.
Cuando intentas consumir una API desde tu aplicación frontend (por ejemplo, usando fetch() o axios) alojada en un dominio o puerto distinto al del servidor backend, el navegador bloquea la respuesta y muestra en la consola un mensaje similar a: 'Access to fetch at 'http://localhost:3000/api' from origin 'http://localhost:8080' has been blocked by CORS policy'.
Causas principales del bloqueo CORS
- El servidor backend no incluye las cabeceras HTTP necesarias para permitir peticiones desde otros orígenes.
- Estás intentando realizar una petición de tipo POST, PUT o DELETE sin manejar correctamente las solicitudes preliminares (preflight requests con el método
OPTIONS). - Configuración incorrecta de credenciales (como cookies o tokens de autorización) entre dominios cruzados.
Método 1: Configurar CORS en un servidor Node.js con Express
La forma más rápida y recomendada de solucionar este problema si estás desarrollando el backend en Node.js es utilizando el paquete oficial cors.
- Abre tu terminal en la carpeta del proyecto backend e instala el paquete ejecutando el comando:
npm install cors - Abre tu archivo principal de servidor (por ejemplo,
app.jsoserver.js). - Importa el paquete y habilítalo 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 peticiones
app.use(cors());
app.get('/api/data', (req, res) => {
res.json({ message: '¡CORS solucionado con éxito!' });
});
app.listen(3000, () => console.log('Servidor corriendo en puerto 3000'));Método 2: Configurar cabeceras HTTP manuales en el Backend
Si no deseas instalar librerías de terceros en tu servidor (independientemente del lenguaje, ya sea PHP, Python o Node.js puro), puedes añadir las cabeceras de respuesta manualmente para permitir el acceso controlado desde el frontend.
- Identifica el archivo o middleware donde se procesan las respuestas HTTP en tu servidor.
- Agrega las siguientes cabeceras en cada respuesta saliente:
res.setHeader('Access-Control-Allow-Origin', 'http://localhost:8080'); // O usa '*' para permitir cualquier origen
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, DELETE');
res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');Método 3: Utilizar un proxy inverso durante el desarrollo local
Si estás trabajando en frontend con frameworks como Vue.js, React (Webpack/Vite) y no tienes acceso al código del servidor backend, puedes configurar un proxy de desarrollo para engañar al navegador.
- Si usas Vite en tu proyecto React o Vue, abre el archivo
vite.config.js. - Añade la configuración de
server.proxypara redirigir las peticiones locales:
export default defineConfig({
server: {
proxy: {
'/api': {
target: 'http://api.servidor-externo.com',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
}
}
}
});