Cómo Solucionar el Error CORS (Cross-Origin Resource Sharing) en Node.js y Express Paso a Paso

Cómo Solucionar el Error CORS (Cross-Origin Resource Sharing) en Node.js y Express Paso a Paso
Anuncio relacionado

¿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.

  1. Abre tu terminal en la raíz del proyecto backend y ejecuta el siguiente comando para instalar el paquete:
    npm install cors
  2. Abre tu archivo principal del servidor (generalmente app.js o server.js).
  3. 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());
  4. 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.

  1. 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
    };
  2. Aplica las opciones directamente en tu ruta o de forma global:
    app.use(cors(corsOptions));
  3. Si necesitas permitir múltiples orígenes, puedes pasar un array de URLs válidas evaluándolas mediante una función de retorno (callback).
Anuncio
Seguir Leyendo

Guías y Soluciones Relacionadas

Windows Apps Juegos
Mac

Cómo Solucionar el Error "La aplicación está dañada y no se puede abrir" en Mac

Aprende a solucionar el molesto mensaje de macOS que indica que una app está dañada y no se puede abrir. Recupera el acceso a tus programas favoritos.

Leer guía completa →
Windows

Cómo Solucionar el Error 0x80070002 en Windows Update Definitivamente

El código de error 0x80070002 en Windows Update impide instalar actualizaciones del sistema. Descubre cómo solucionarlo de forma definitiva con estos métodos probados.

Leer guía completa →
WordPress

Cómo Solucionar el Error Fatal 'Maximum Execution Time Exceeded' en WordPress Paso a Paso

¿Tu web de WordPress muestra un error fatal debido al tiempo de ejecución agotado? Te enseñamos las causas y cómo solucionarlo rápidamente.

Leer guía completa →