¿Qué es el error CORS 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 script hacia un dominio diferente al que sirvió la página original. Aunque es vital para la seguridad web, suele frustrar a los desarrolladores al integrar APIs de terceros.
Causas principales del error CORS
Este bloqueo de seguridad ocurre típicamente por los siguientes motivos:
- El servidor de la API no incluye las cabeceras HTTP necesarias para permitir solicitudes externas.
- Estás intentando hacer una petición desde un origen local (ej.
http://localhost:3000) a un servidor de producción sin los permisos adecuados. - El navegador bloquea solicitudes con credenciales o métodos HTTP no autorizados (como PUT o DELETE sin pre-vuelo OPTIONS).
Método 1: Configurar las cabeceras HTTP en el Servidor (Node.js/Express)
La solución más robusta es configurar el servidor backend para que acepte peticiones del origen de tu aplicación frontend mediante cabeceras CORS explícitas.
- Si usas Node.js con Express, instala el paquete oficial ejecutando
npm install corsen tu terminal. - Importa y habilita el middleware en tu archivo principal de servidor:
const express = require('express');
const cors = require('cors');
const app = express();
// Permitir todas las peticiones de origen cruzado
app.use(cors());
app.get('/api/data', (req, res) => {
res.json({ message: '¡CORS solucionado con éxito!' });
});
app.listen(3000);Método 2: Usar un Proxy Inverso durante el desarrollo
Si estás desarrollando en local y no tienes acceso al código del servidor backend, puedes evitar el CORS configurando un proxy en tu entorno de desarrollo.
- Si utilizas
Vitecomo empaquetador, abre tu archivovite.config.js. - Añade la sección de configuración
server.proxypara redirigir las peticiones locales:
export default defineConfig({
server: {
proxy: {
'/api': {
target: 'https://api.ejemplo.com',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
}
}
}
});