Introducción al Error CORS en JavaScript
Cuando desarrollamos aplicaciones web modernas utilizando JavaScript y la API Fetch para consumir recursos de servidores externos, es muy común encontrarnos con el temido bloqueo por políticas de seguridad del navegador conocido como CORS (Cross-Origin Resource Sharing). Este mecanismo de seguridad impide que una página web realice peticiones a un dominio diferente al que sirvió la página original, a menos que el servidor de destino otorgue permisos explícitos.
Causas Principales del Error CORS
El error CORS se desencadena principalmente por las siguientes razones:
- El servidor de la API no incluye las cabeceras HTTP necesarias (como
Access-Control-Allow-Origin) en su respuesta. - Estás intentando realizar una petición desde un entorno de desarrollo local (ej.
http://localhost:3000) a un servidor de producción sin configurar un proxy inverso. - El navegador bloquea una solicitud compleja (como métodos PUT, DELETE o con cabeceras personalizadas) porque el servidor no respondió correctamente a la petición previa de tipo
OPTIONS(preflight request).
Método 1: Configurar las Cabeceras CORS en el Servidor Backend
La solución más limpia y recomendada si tienes acceso al código del servidor backend (Node.js, Express, PHP, Python, etc.) es configurar las cabeceras HTTP adecuadas para permitir solicitudes desde tu origen.
Si utilizas Express en Node.js, puedes solucionarlo fácilmente instalando y configurando el paquete cors:
const express = require('express');
const cors = require('cors');
const app = express();
// Permitir todas las peticiones de origen cruzado
app.use(cors());
app.get('/api/data', (req, res) => {
res.json({ message: '¡CORS configurado correctamente!' });
});
app.listen(3000);Si prefieres hacerlo de forma manual sin librerías de terceros, debes añadir la cabecera directamente en la respuesta HTTP de tu servidor:
res.setHeader('Access-Control-Allow-Origin', '*'); // O especifica tudominio.com
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');Método 2: Utilizar un Proxy Inverso en el Entorno de Desarrollo
Si estás consumiendo una API pública de terceros sobre la cual no tienes control ni acceso para modificar sus cabeceras, la mejor alternativa durante la fase de desarrollo es configurar un proxy inverso en tu entorno.
Si trabajas con Vite, puedes configurar el archivo vite.config.js de la siguiente manera para redirigir las peticiones locales:
export default defineConfig({
server: {
proxy: {
'/api': {
target: 'https://api.ejemplo.com',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
}
}
}
});De esta forma, en lugar de hacer el fetch directamente a la URL externa, harás la petición a /api/recurso y tu servidor de desarrollo local se encargará de enrutarla evitando restricciones CORS.
Método 3: Ajustar las Opciones de Fetch en el Cliente (Modo No-Cors)
Aunque no es una solución universal para leer datos JSON de otros dominios, la Fetch API permite configurar el modo de la solicitud. Sin embargo, debes usarlo con precaución:
fetch('https://api.ejemplo.com/datos', {
mode: 'no-cors'
})
.then(response => {
// La respuesta será opaca y no podrás leer el cuerpo (body) en JavaScript
console.log(response);
})
.catch(error => console.error('Error:', error));Nota importante: El uso de mode: 'no-cors' evita que el navegador bloquee la petición a nivel de consola, pero devolverá una respuesta opaca donde no podrás acceder a los datos JSON devueltos por el servidor. Solo es útil si solo te interesa enviar datos (por ejemplo, a un servicio de analítica) sin esperar una respuesta leíble.