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 'Killed: 9' en macOS de Forma Definitiva

Descubre por qué aparece el frustrante error Killed: 9 en tu Mac y cómo solucionarlo aplicando los permisos y configuraciones correctas.

Leer guía completa →
Hardware

Cómo Solucionar la Pantalla Azul de la Muerte (BSOD) en Windows Paso a Paso

La Pantalla Azul de la Muerte (BSOD) es una de las incidencias más temidas en Windows. Aprende a diagnosticar el problema de hardware y recupera tu equipo.

Leer guía completa →
Shopify

Cómo Solucionar el Error de Liquid Syntax Error en Shopify Paso a Paso

¿Tu tienda online muestra un fallo de código al cargar la página? Descubre cómo identificar y solucionar el Liquid Syntax Error en tu tema de Shopify.

Leer guía completa →