En el desarrollo web moderno, el manejo de recursos entre orígenes cruzados (CORS) es un componente esencial para conectar servicios de front end y backend. Next-Forge, una plantilla de grado producción para aplicaciones Next.js, incorpora estrategias preconfiguradas para gestionar solicitudes de dominios cruzados de manera segura y eficiente.

Fundamentos de CORS en arquitecturas Next.js

Los navegadores implementan CORS como mecanismo de seguridad para controlar el acceso a recursos entre distintos orígenes. En aplicaciones con separación frontend-backend, las solicitudes API frecuentemente enfrentan bloqueos por políticas de mismo origen. Next-Forge aborda esto mediante una capa de seguridad construida con Nosecone, que gestiona encabezados HTTP incluyendo los relacionados con CORS.

Configuración inicial del proyecto

La implementación básica requiere modificaciones en dos archivos principales de configuración. Primero, en el archivo de configuración de Next.js se establecen los encabezados CORS gloables:

// Archivo de configuración de Next.js
export const config = {
  async headers() {
    return [{
      source: '/api/:path*',
      headers: [
        { key: 'Access-Control-Allow-Origin', value: process.env.APP_ORIGIN || '*' },
        { key: 'Access-Control-Allow-Methods', value: 'GET, POST, PUT, DELETE, OPTIONS' },
        { key: 'Access-Control-Allow-Headers', value: 'Content-Type, Authorization' }
      ]
    }];
  }
};

La configuración de seguridad en el proxy ya incorpora protecciones CORS por defecto que pueden personalizarse según necesidades específicas.

Estrategias de configuración avanzada

Para implementaciones complejas, se pueden definir políticas CORS diferenciadas por entorno. Mediante variables de entorno se controlan los orígenes permitidos:

// Definición de variables de entorno para CORS
export const environment = {
  allowedOrigins: process.env.CORS_ORIGINS?.split(',') || []
};

Las rutas API específicas pueden establecer sus propias políticas CORS. Esto es particularmente útil para endpoints que reciben webhooks de servicios externos:

// Controlador de ruta con CORS específico
export async function OPTIONS() {
  return new Response(null, {
    headers: {
      'Access-Control-Allow-Origin': process.env.TRUSTED_ORIGIN,
      'Access-Control-Allow-Methods': 'POST, OPTIONS'
    }
  });
}

Un middleware centralizado permite aplicar políticas CORS uniformes a todas las solicitudes, simplificando el mantenimiento y asegurando consistencia.

Resolución de problemas comunes

En entornos de desarrollo local, donde frontend y backend corren en diferentes puertos, se requiere configuración permisiva. Se recomienda usar orígenes específicos en producción:

// Configuración condicional para desarrollo
if (process.env.NODE_ENV === 'development') {
  // Permitir origen localhost específico
}

Para aplicaciones multi-tenant o con múltiples dominios, se implementa validación dinámica de orígenes contra una lista permitida.

Mejores prácticas de seguridad

La configuración en producción debe evitar comodines genéricos, limitar métodos HTTP a los estrictamente necesarios y combinar CORS con otras capas de protección como limitación de tasa. La integración con middleware de seguridad centralizado facilita la auditoría y consistencia de políticas.

Consideraciones de implementación

La arquitectura modular de Next-Forge permite extender la configuración CORS mediante plugins o adaptadores personalizados. Para casos especiales como credenciales de autenticación o encabezados personalizados, se deben incluir explícitamente en los permisos CORS.