¿Qué es el Error CORS y por qué ocurre en Node.js?
El intercambio de recursos de origen cruzado (CORS) es un mecanismo de seguridad implementado por los navegadores web. Este sistema restringe las solicitudes HTTP realizadas desde scripts hacia un dominio diferente al que sirvió la página original. Cuando desarrollas una API en Node.js con Express y tu frontend (en React, Vue o Angular) corre en un puerto distinto (por ejemplo, http://localhost:3000 frente a http://localhost:5000), el navegador bloquea la respuesta automáticamente mostrando el temido error de CORS en la consola.
Causas Principales del Bloqueo CORS
- Ausencia de cabeceras HTTP de control de acceso (Access-Control-Allow-Origin).
- Intento de enviar credenciales (como cookies o tokens de autorización) sin la configuración adecuada en el servidor.
- Métodos HTTP no permitidos explícitamente (como PUT, DELETE o solicitudes personalizadas).
Método 1: Instalar y Configurar el Paquete Oficial 'cors' en Express
La forma más sencilla, recomendada y estandarizada de solucionar este problema en Node.js es utilizando el middleware oficial cors.
- Abre tu terminal en la raíz del proyecto backend y ejecuta el siguiente comando para instalar el paquete:
npm install cors - Abre tu archivo principal del servidor (generalmente
app.jsoserver.js). - Importa el paquete y actívalo como middleware antes de declarar tus rutas:
const express = require('express');const cors = require('cors');const app = express();app.use(cors()); - Reinicia tu servidor Node.js y comprueba que el error ha desaparecido.
Método 2: Configurar CORS para Orígenes Específicos y Mayor Seguridad
Habilitar CORS de manera global (cors()) permite peticiones desde cualquier dominio, lo cual no es seguro para entornos de producción. Es mejor restringir el acceso únicamente a la URL de tu frontend.
- Modifica la configuración del middleware especificando un objeto de opciones con la propiedad
origin:const corsOptions = {origin: 'https://tu-frontend-dominio.com',optionsSuccessStatus: 200}; - Aplica las opciones directamente en tu ruta o de forma global:
app.use(cors(corsOptions)); - Si necesitas permitir múltiples orígenes, puedes pasar un array de URLs válidas evaluándolas mediante una función de retorno (callback).