¿Qué es el error CORS y por qué ocurre en JavaScript?
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 desde tu aplicación JavaScript y recibes un mensaje en la consola como Access to fetch at 'https://api.ejemplo.com/datos' from origin 'http://localhost:3000' has been blocked by CORS policy, significa que el servidor de destino no ha autorizado explícitamente a tu origen para recibir los datos.
Causas principales del bloqueo CORS
Las causas más comunes de este fallo en el desarrollo web moderno incluyen:
- Falta de cabeceras HTTP de control de acceso en el servidor backend.
- Diferencias en el protocolo (HTTP frente a HTTPS), el puerto o el nombre de dominio entre el cliente y el servidor.
- Solicitudes preflight (peticiones OPTIONS) mal configuradas o rechazadas por el servidor.
Método 1: Configurar las cabeceras HTTP en el Servidor (Node.js/Express)
La forma más correcta y recomendada de solucionar el error CORS es configurar el servidor backend para que permita solicitudes desde tu origen. Si utilizas Node.js con Express, puedes hacerlo utilizando el paquete oficial cors.
- Instala el paquete ejecutando
npm install corsen la terminal de tu proyecto backend. - Importa y utiliza el middleware en tu archivo principal (por ejemplo,
server.jsoapp.js).
Ejemplo de código:
const express = require('express');
const cors = require('cors');
const app = express();
// Habilitar CORS para todas las rutas
app.use(cors());
app.get('/api/datos', (req, res) => {
res.json({ mensaje: '¡CORS configurado con éxito!' });
);
app.listen(3000, () => console.log('Servidor corriendo en puerto 3000'));Método 2: Usar un Proxy Inverso durante el Desarrollo (Vite / Webpack)
Si estás desarrollando en el frontend (con herramientas como React, Vue o Vite) y no tienes acceso al código del servidor backend, puedes evitar el bloqueo CORS configurando un proxy en tu empaquetador local para que redirija las peticiones como si vinieran del mismo origen.
- Abre el archivo de configuración de tu entorno de desarrollo (por ejemplo,
vite.config.js). - Añade la sección
server.proxypara redirigir las peticiones que comiencen con/apihacia el servidor real.
Ejemplo de configuración en Vite:
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig({
plugins: [react()],
server: {
proxy: {
'/api': {
target: 'https://api.ejemplo.com',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
}
}
}
});