🌐 Configuración CORS y proxies

🌐 Configuración CORS y proxies en Next.js

Aprende cómo manejar correctamente las políticas de CORS y configurar proxies en tus proyectos con Next.js para comunicarte con APIs externas de forma segura.

🧭 ¿Qué es CORS?

CORS (Cross-Origin Resource Sharing) es un mecanismo de seguridad que impide que una página web haga solicitudes a otro dominio diferente al que sirvió la página, a menos que el servidor lo permita explícitamente.

En otras palabras, si tu aplicación Next.js corre en http://localhost:3000 y necesita datos de una API en https://api.misitio.com, el navegador bloqueará la solicitud si el servidor no envía los encabezados CORS adecuados.

⚠️ Error común: Access to fetch at ... from origin 'http://localhost:3000' has been blocked by CORS policy

🔧 Configurar CORS en una API interna

En Next.js, puedes definir tus propias rutas de API dentro de /pages/api. Si necesitas permitir solicitudes desde otros dominios, puedes configurar manualmente los encabezados de CORS:

📄 `pages/api/hello.js`

export default function handler(req, res) {
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
  
  if (req.method === 'OPTIONS') {
    return res.status(200).end();
  }

  res.status(200).json({ message: 'CORS habilitado correctamente 🚀' });
}

Este ejemplo permite solicitudes desde cualquier origen (*), pero en producción deberías limitarlo a dominios específicos:

res.setHeader('Access-Control-Allow-Origin', 'https://tusitio.com');

📦 Usando la librería `cors`

Otra opción más elegante es usar el paquete cors con un middleware. Instálalo con:

npm install cors

Y luego crea un middleware reutilizable en lib/init-middleware.js:

📄 `lib/init-middleware.js`

export default function initMiddleware(middleware) {
  return (req, res) =>
    new Promise((resolve, reject) => {
      middleware(req, res, (result) => {
        if (result instanceof Error) return reject(result);
        return resolve(result);
      });
    });
}

📄 `pages/api/data.js`

import Cors from 'cors';
import initMiddleware from '../../lib/init-middleware';

const cors = initMiddleware(
  Cors({
    methods: ['GET', 'POST', 'OPTIONS'],
    origin: ['https://tusitio.com', 'http://localhost:3000'],
  })
);

export default async function handler(req, res) {
  await cors(req, res); // Ejecuta el middleware
  res.json({ message: 'CORS configurado con éxito 🎉' });
}

Con este enfoque, puedes controlar exactamente qué dominios y métodos HTTP están permitidos.

🛰️ Configurar un proxy para evitar CORS

Una técnica común para evitar problemas de CORS en desarrollo es crear un proxy interno que redirija las solicitudes a la API externa desde tu propio servidor Next.js.

Por ejemplo, puedes crear una ruta API que actúe como intermediario:

📄 `pages/api/proxy.js`

export default async function handler(req, res) {
  const response = await fetch('https://api.externa.com/data');
  const data = await response.json();
  res.status(200).json(data);
}

Así, tu frontend puede llamar a /api/proxy sin problema de CORS, y Next.js se encarga de comunicarse con la API externa desde el servidor.

Esquema básico de comunicación con proxy interno

✅ Conclusión

CORS es una capa de seguridad que protege al usuario final.
En desarrollo, puedes habilitar CORS temporalmente o usar proxies.
En producción, configura CORS solo para tus dominios permitidos.

💡 Consejo: Usa proxies internos durante el desarrollo y configura CORS específicos para producción. Esto evita y mantiene tu aplicación protegida.

← Volver al índice

🌐 Configuración CORS y proxies