¿Qué es el error CORS y por qué ocurre en el desarrollo web?
El error CORS (Cross-Origin Resource Sharing) es un mecanismo de seguridad implementado por los navegadores web modernos que restringe las solicitudes HTTP realizadas desde un dominio (origen) hacia un servidor ubicado en un dominio diferente. Cuando tu aplicación frontend en React, Vue o JavaScript vainilla intenta consumir una API en Node.js alojada en un puerto o dominio distinto sin la debida autorización, el navegador bloquea la respuesta y muestra el temido mensaje Access-Control-Allow-Origin en la consola.
Principales causas del bloqueo por CORS
Este problema de comunicación cliente-servidor suele presentarse por:
- Falta de configuración de encabezados HTTP en el servidor backend.
- Intento de realizar peticiones AJAX o Fetch a dominios diferentes sin habilitar explícitamente el origen.
- Falta de soporte para solicitudes preflight (método OPTIONS) cuando se envían encabezados personalizados o métodos como PUT y DELETE.
Método 1: Solucionar CORS en Node.js usando el paquete cors
La forma más rápida y recomendada en entornos de desarrollo con Express.js es utilizar el middleware oficial cors.
- Abre tu terminal en la raíz del proyecto backend e instala el paquete ejecutando:
npm install cors - Abre tu archivo principal del servidor (por ejemplo,
server.jsoapp.js). - Importa e implementa el middleware antes de definir tus rutas:
const express = require('express');const cors = require('cors');const app = express();app.use(cors());
Método 2: Configurar encabezados HTTP manualmente en el servidor
Si no utilizas Express o prefieres un enfoque nativo sin dependencias externas, puedes añadir los encabezados correspondientes directamente en la respuesta del servidor Node.js.
- Localiza el archivo donde manejas las solicitudes del servidor HTTP.
- Añade los siguientes encabezados en todas las respuestas salientes antes de enviar los datos:
res.setHeader('Access-Control-Allow-Origin', '*');res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');