¿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. Este sistema bloquea las peticiones HTTP realizadas desde un dominio (origen) hacia un servidor distinto, protegiendo así a los usuarios de ataques maliciosos como el robo de datos.
Sin embargo, cuando estás desarrollando una aplicación moderna que separa el frontend (por ejemplo, React o Vue) del backend (Node.js o PHP), este bloqueo se convierte en un obstáculo común. El mensaje típico en la consola es: Access to fetch at '...' from origin '...' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Causas principales del fallo de CORS
- El servidor backend no incluye las cabeceras HTTP necesarias para autorizar el origen de la petición.
- Estás intentando enviar credenciales (como cookies o tokens de autorización) sin la configuración adecuada en el cliente y el servidor.
- El navegador envía una petición preliminar de tipo
OPTIONSque el servidor rechaza o no sabe cómo gestionar.
Método 1: Configurar CORS en un servidor backend con Node.js y Express
La forma más rápida y recomendada de solucionar este problema en un entorno de Node.js es utilizando el paquete oficial cors.
- Instala el paquete en tu proyecto ejecutando el siguiente comando en tu terminal:
npm install cors - Abre el archivo principal de tu servidor (por ejemplo,
app.jsoserver.js). - Importa y habilita el middleware antes de definir tus rutas:
const express = require('express');
const cors = require('cors');
const app = express();
// Habilitar CORS para todas las peticiones
app.use(cors());
app.get('/api/data', (req, res) => {
res.json({ message: '¡CORS solucionado con éxito!' });
});
app.listen(3000, () => console.log('Servidor corriendo en puerto 3000'));Método 2: Configurar cabeceras HTTP de forma manual en PHP
Si tu API está desarrollada en PHP puro, debes enviar las cabeceras HTTP correspondientes al inicio de tu script para permitir el acceso desde cualquier origen o desde uno específico.
- Abre el archivo PHP que recibe las peticiones (por ejemplo,
api.php). - Agrega las siguientes líneas de código en la parte superior, antes de cualquier salida de datos:
{"status":"success"}Método 3: Utilizar un Proxy inverso durante el desarrollo local
Si no tienes acceso para modificar el código del servidor backend al que estás consultando, puedes configurar un proxy en tu herramienta de desarrollo (como Vite, Webpack o Vue CLI) para engañar al navegador.
- Si usas Vite, abre tu archivo
vite.config.js. - Modifica la configuración para redirigir las peticiones locales:
export default defineConfig({
server: {
proxy: {
'/api': {
target: 'https://api.servidor-externo.com',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
}
}
}
});