Introducción al Error CORS en el Desarrollo Web
Uno de los dolores de cabeza más comunes para los desarrolladores frontend y backend es el temido error CORS (Cross-Origin Resource Sharing). Al intentar realizar una petición HTTP utilizando fetch() o axios desde una aplicación JavaScript hacia un servidor con un dominio, puerto o protocolo diferente, el navegador bloquea la respuesta por razones de seguridad.
¿Cuáles son las Causas Principales del Error CORS?
El error CORS se origina debido a la política de mismo origen (Same-Origin Policy) implementada en los navegadores web modernos. Las causas más frecuentes incluyen:
- El servidor backend no incluye las cabeceras HTTP necesarias para permitir solicitudes de origen cruzado.
- Estás intentando consumir una API desde
localhosthacia un servidor de producción sin la configuración adecuada. - El método HTTP utilizado (como PUT, DELETE o solicitudes con cabeceras personalizadas) requiere una petición de verificación previa (preflight request con OPTIONS) que el servidor rechaza o no responde correctamente.
Método 1: Configurar las Cabeceras CORS en el Servidor (Node.js / Express)
La solución definitiva en el lado del servidor consiste en añadir las cabeceras HTTP que autorizan el acceso. Si utilizas Node.js con Express, la forma más sencilla y recomendada es instalar y configurar el paquete cors.
- Instala el paquete en tu proyecto backend ejecutando el siguiente comando:
npm install cors - Importa y utiliza el middleware en tu archivo principal (por ejemplo,
server.jsoapp.js):
const express = require('express');
const cors = require('cors');
const app = express();
// Permitir todas las solicitudes CORS
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 Manualmente en PHP
Si tu API está desarrollada en PHP, debes enviar las cabeceras HTTP antes de cualquier salida de datos para permitir que el navegador acepte la respuesta.
- Abre el archivo PHP principal o el controlador de tu API.
- Agrega el siguiente fragmento de código al inicio del archivo:
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: GET, POST, OPTIONS");
header("Access-Control-Allow-Headers: Content-Type, Authorization");
if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
http_response_code(200);
exit();
}
Método 3: Utilizar un Servidor Proxy durante el Desarrollo Local
Si no tienes acceso para modificar el código del servidor backend que estás consumiendo, puedes evitar el bloqueo CORS durante la fase de desarrollo configurando un proxy en tu herramienta de empaquetado (como Vite o React/Vue CLI).
- Si usas
vite.config.js, añade la opción de proxy en la configuración del servidor:
export default defineConfig({
server: {
proxy: {
'/api': {
target: 'https://api.servidor-externo.com',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
}
}
}
});