¿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. Este sistema restringe las solicitudes HTTP que se realizan desde un script ejecutado en el frontend hacia un dominio, puerto o protocolo diferente al del servidor de origen.
Cuando intentas consumir una API externa utilizando librerías como fetch o axios y el servidor backend no incluye los encabezados HTTP adecuados, el navegador bloquea la respuesta, arrojando el temido error en la consola de depuración: Access to fetch at 'URL' from origin 'URL' has been blocked by CORS policy.
Causas principales del bloqueo CORS
- Ausencia de cabeceras HTTP de control de acceso en el servidor backend.
- Diferencias de puertos o dominios entre la aplicación cliente y la API.
- Solicitudes preflight (método OPTIONS) fallidas debido a credenciales no autorizadas.
Método 1: Configurar las cabeceras CORS en el servidor (Node.js con Express)
La forma más limpia y recomendada de solucionar este problema es configurando explícitamente el servidor para que permita solicitudes desde tu origen. Si utilizas Node.js y Express, puedes instalar y configurar el paquete cors.
- Instala el paquete ejecutando
npm install corsen la terminal de tu proyecto backend. - Importa y utiliza el middleware en tu archivo principal de servidor (ej.
server.jsoapp.js). - Añade el siguiente código antes de definir tus rutas:
const express = require('express');
const cors = require('cors');
const app = express();
// Permitir todas las solicitudes CORS (solo para desarrollo)
app.use(cors());
// O configurar dominios específicos:
const corsOptions = {
origin: 'http://localhost:3000',
optionsSuccessStatus: 200
};
app.get('/api/data', cors(corsOptions), (req, res) => {
res.json({ message: '¡Datos enviados sin error CORS!' });
});
app.listen(5000, () => console.log('Servidor corriendo en puerto 5000'));Método 2: Utilizar un proxy inverso durante el desarrollo
Si no tienes acceso al código fuente del servidor backend para modificar las cabeceras, puedes evitar las restricciones del navegador configurando un proxy en tu entorno de desarrollo frontend.
Si estás utilizando frameworks modernos como React (con Create React App) o Vue.js, puedes añadir una regla de proxy en tu archivo de configuración:
- Abre tu archivo
package.jsonsi usas React. - Añade la propiedad
proxyapuntando al servidor de la API:"proxy": "https://api.tuservidor.com" - Modifica tus peticiones en JavaScript para que apunten directamente a la ruta relativa (ej:
fetch('/api/recurso')en lugar defetch('https://api.tuservidor.com/recurso')).
Método 3: Instalar una extensión de navegador para pruebas rápidas
Aunque no es una solución para producción, si te encuentras en una fase temprana de pruebas y necesitas consumir una API pública que no incluye CORS, puedes utilizar extensiones en tu navegador.
- Instala una extensión de control CORS como CORS Unblock o Allow CORS: Access-Control-Allow-Origin desde la tienda de tu navegador.
- Activa la extensión en la barra de herramientas cuando necesites realizar pruebas locales.
- Recuerda desactivarla al finalizar para evitar vulnerabilidades de seguridad en tu navegación diaria.