Cómo Solucionar el Error CORS en Node.js y Express Paso a Paso

Cómo Solucionar el Error CORS en Node.js y Express Paso a Paso
Anuncio relacionado

¿Qué es el Error CORS en Node.js?

El error de Intercambio de Recursos de Origen Cruzado (CORS, por sus siglas en inglés) es una medida de seguridad implementada por los navegadores web que restringe las solicitudes HTTP realizadas desde un dominio (origen) diferente al que sirve la API. Cuando desarrollas una aplicación backend con Node.js y Express, es muy común encontrarse con este bloqueo al intentar conectar un frontend en React, Vue o Angular que corre en un puerto distinto.

Causas Principales del Error CORS

Este problema se manifiesta generalmente en la consola del navegador con mensajes como Access to XMLHttpRequest at 'http://localhost:5000/api' from origin 'http://localhost:3000' has been blocked by CORS policy. Las causas principales son:

  • El servidor backend no incluye las cabeceras HTTP necesarias para autorizar el origen de la petición.
  • Se intenta acceder desde un dominio, protocolo o puerto no autorizado explícitamente.
  • Las peticiones con métodos personalizados o credenciales (como cookies o tokens de autorización) no están permitidas por defecto.

Método 1: Instalar y Configurar el Paquete CORS en Express

La forma más rápida, limpia y recomendada de solucionar este error en una aplicación Node.js con Express es utilizando el middleware oficial cors.

  1. Abre tu terminal en la raíz del proyecto backend.
  2. Instala el paquete ejecutando el siguiente comando: npm install cors
  3. Abre tu archivo principal del servidor (por ejemplo, app.js o server.js).
  4. Importa el módulo y utilízalo antes de definir tus rutas con el siguiente código:

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 configurado con éxito!' }); }); app.listen(5000, () => console.log('Servidor corriendo en puerto 5000'));

Método 2: Configurar CORS para Orígenes Específicos (Producción)

Habilitar CORS para cualquier origen (*) puede representar un riesgo de seguridad en entornos de producción. Lo ideal es restringir el acceso únicamente a los dominios confiables.

  1. Modifica la configuración del middleware cors pasando un objeto de opciones con la propiedad origin.
  2. Define una lista blanca de dominios permitidos tal como se muestra en el siguiente ejemplo:

const whitelist = ['https://tudominio.com', 'http://localhost:3000']; const corsOptions = { origin: function (origin, callback) { if (whitelist.indexOf(origin) !== -1 || !origin) { callback(null, true); } else { callback(new Error('Bloqueado por la política CORS')); } } }; app.use(cors(corsOptions));

Conclusión

Solucionar el error CORS en Node.js es fundamental para permitir la comunicación fluida entre tu API y tus clientes web. Utilizando el middleware oficial y aplicando restricciones basadas en listas blancas para producción, garantizarás una arquitectura robusta y segura.

Anuncio
Seguir Leyendo

Guías y Soluciones Relacionadas

Windows Apps Juegos
Desarrollo

Cómo Solucionar el Error CORS (Cross-Origin Resource Sharing) en JavaScript y Node.js de Forma Definitiva

¿Te aparece el temido bloqueo CORS al conectar tu frontend con tu API? Descubre por qué ocurre y cómo solucionarlo paso a paso.

Leer guía completa →
Mac

Cómo Solucionar el Error 'La aplicación está dañada y no puede abrirse' en Mac Paso a Paso

¿Tu Mac no te deja abrir una app descargada de internet y muestra un mensaje de error? Descubre cómo solucionar este problema de seguridad de macOS fácilmente.

Leer guía completa →
Mac

Cómo Solucionar el Error de 'App Dañada y No Se Puede Abrir' en Mac de Forma Definitiva

¿Te aparece un mensaje de que tu app está dañada y no se puede abrir en Mac? Descubre cómo solucionar este problema de seguridad de macOS fácilmente.

Leer guía completa →