Utilizar la REST API y configurar CORS

En esta clase damos un paso muy importante: consumir nuestra REST API desde un frontend real.

Hasta ahora hemos probado la API desde el navegador escribiendo la URL directamente o usando herramientas de servidor. Pero cuando intentamos acceder a la API desde una aplicación frontend que corre en un origen distinto, aparece un problema clásico del desarrollo web: CORS.

El problema: La política de mismo origen (Same-Origin Policy)

Imagina que tienes:

Tu backend en http://localhost:1234
Tu frontend (un proyecto con React, por ejemplo) en http://localhost:5173

Aunque ambos estén en tu ordenador, para el navegador son orígenes distintos porque el puerto es diferente. Por seguridad, los navegadores bloquean por defecto cualquier petición HTTP que se haga entre orígenes distintos.

Importante: Esto no es un error de Express ni de tu código. Es una restricción de seguridad del navegador para proteger al usuario.

¿Qué es CORS?

CORS significa Cross-Origin Resource Sharing (Intercambio de Recursos de Origen Cruzado).

Es un mecanismo que utiliza cabeceras HTTP para indicarle al navegador que un servidor permite que un frontend desde otro origen acceda a sus recursos. Si el servidor no envía estas cabeceras permitiendo el acceso, el navegador bloqueará la respuesta.

El error que verás en la consola

Cuando intentes hacer un fetch() desde el frontend sin configurar CORS, verás un error parecido a este en la consola del navegador:

Access to fetch at '...' from origin '...' has been blocked by CORS policy.

La petición llega al servidor, el servidor responde, pero el navegador tira la respuesta a la basura porque no tiene permiso.

Solución: habilitar CORS en Express

La forma más profesional y sencilla de resolver esto es utilizando el middleware oficial de Express llamado cors.

1. Instalación del paquete

Primero, instalamos la dependencia en nuestro proyecto:

npm install cors

2. Configurando el middleware

Una vez instalado, simplemente lo importamos y lo registramos como middleware global:

import express from 'express'
import cors from 'cors'

const app = express()
const PORT = process.env.PORT ?? 1234

// Habilitamos CORS para todos los orígenes
app.use(cors())

app.use(express.json())

// ... tus rutas aquí ...

app.listen(PORT, () => {
  console.log(`Servidor levantado en http://localhost:${PORT}`)
})

Probando de nuevo la API

Al añadir app.use(cors()), el servidor empezará a incluir la cabecera Access-Control-Allow-Origin: * en todas sus respuestas.

El navegador verá esta cabecera y permitirá que el código del frontend lea la respuesta.
Ya puedes realizar GET, POST, PATCH o DELETE desde tu aplicación React, Vue o JavaScript puro sin bloqueos.

Lo que hemos aprendido

✅ El navegador bloquea peticiones entre orígenes distintos por seguridad.
✅ CORS es el mecanismo para relajar esta restricción de forma controlada.
✅ Usamos el middleware cors para no tener que gestionar las cabeceras manualmente.
✅ Con una sola línea de código, nuestra API pasa de ser “privada” a ser “pública” para otros frontends.

A partir de este momento, tu REST API ya es totalmente funcional y puede servir de motor para cualquier aplicación web real.