Introducción al Error CORS en JavaScript
Uno de los dolores de cabeza más comunes para los desarrolladores web frontend y backend es el temido error de CORS (Cross-Origin Resource Sharing). Cuando intentas realizar una petición fetch o axios desde tu aplicación JavaScript hacia un dominio, puerto o protocolo distinto al del servidor de origen, el navegador bloquea la respuesta por razones de seguridad.
¿Cuáles son las causas del bloqueo CORS?
El mecanismo de seguridad de un mismo origen (Same-Origin Policy) implementado por los navegadores web es el responsable directo. Las causas principales incluyen:
- Intentar consumir una API externa que no incluye las cabeceras HTTP de acceso cruzado.
- Realizar peticiones desde un entorno de desarrollo local (ej.
http://localhost:3000) a una API de producción sin la configuración adecuada. - Falta de manejo correcto de las solicitudes preflight (método
OPTIONS).
Método 1: Configurar las cabeceras HTTP en el Servidor (Backend)
La solución más limpia y recomendada es configurar el servidor backend para que permita solicitudes desde otros orígenes mediante cabeceras específicas.
- Accede al código de tu servidor backend (Node.js, PHP, Python, etc.).
- Añade las siguientes cabeceras HTTP en las respuestas de la API:
Access-Control-Allow-Origin: *Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONSAccess-Control-Allow-Headers: Content-Type, AuthorizationSi utilizas Express.js en Node.js, puedes instalar y configurar el paquete oficial de CORS de forma muy sencilla:
const cors = require('cors');
const express = require('express');
const app = express();
app.use(cors());Método 2: Utilizar un Proxy Inverso en el Entorno de Desarrollo
Si no tienes acceso al código del servidor backend para modificar las cabeceras, puedes evitar el bloqueo CORS utilizando un proxy en tu herramienta de desarrollo local (como Vite o Webpack).
- Abre el archivo de configuración de tu empaquetador (por ejemplo,
vite.config.js). - Configura la propiedad
server.proxypara redirigir las peticiones locales hacia la API externa:
export default {
server: {
proxy: {
'/api': {
target: 'https://api.ejemplo.com',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
}
}
}
};De esta forma, el navegador creerá que la petición se realiza al mismo dominio local, eliminando por completo el error CORS durante las fases de desarrollo y pruebas.