¿Qué es el Error de CORS en JavaScript?
El error de CORS (Cross-Origin Resource Sharing) es uno de los problemas más comunes a los que nos enfrentamos los desarrolladores web al consumir APIs desde JavaScript. Ocurre cuando el navegador bloquea una petición HTTP realizada desde un dominio, puerto o protocolo diferente al del servidor de origen debido a políticas de seguridad estrictas.
Causas Principales del Bloqueo CORS
Los navegadores modernos implementan la política de mismo origen (Same-Origin Policy) por defecto. Las causas más frecuentes de este fallo incluyen:
- Intentar conectar un frontend en
http://localhost:3000con un backend enhttp://localhost:5000. - Falta de cabeceras HTTP de control de acceso en el servidor de la API.
- Peticiones con credenciales (cookies o tokens de autorización) mal configuradas.
- Uso de métodos HTTP no permitidos por el servidor (como PUT o DELETE sin pre-flight).
Método 1: Configurar las Cabeceras CORS en el Servidor (Node.js / Express)
La forma correcta y definitiva de solucionar CORS en producción es configurar tu servidor backend para que permita solicitudes desde tu origen frontend. Si usas Node.js con Express, puedes instalar y configurar el paquete cors.
- Instala el paquete ejecutando
npm install corsen tu terminal de backend. - Importa y utiliza el middleware en tu archivo principal
server.jsoapp.js:
const express = require('express');
const cors = require('cors');
const app = express();
// Permitir todos los orígenes (solo desarrollo)
app.use(cors());
// O configurar un origen específico
const corsOptions = {
origin: 'https://tusitio.com',
optionsSuccessStatus: 200
};
app.get('/api/data', cors(corsOptions), (req, res) => {
res.json({ message: '¡CORS configurado con éxito!' });
});Método 2: Usar un Servidor Proxy Inverso en Desarrollo
Si no tienes acceso al código del servidor backend y necesitas evitar el bloqueo CORS mientras desarrollas localmente, puedes configurar un proxy en tu herramienta de empaquetado (como Vite o Webpack) o en tu archivo package.json si usas React.
- Abre tu archivo
package.jsonen tu proyecto frontend de React. - Añade la propiedad
proxyapuntando a la URL de tu API:
{
"name": "mi-frontend",
"version": "1.0.0",
"proxy": "https://api.servidor-externo.com"
}- Modifica tus peticiones en JavaScript para que apunten a la ruta relativa (
/api/recurso) en lugar de la URL absoluta, haciendo que el entorno de desarrollo enrute la petición sin activar las restricciones del navegador.