Guia completa de configuracion CORS con Claude Code

Implementando correctamente la configuracion CORS con Claude Code

CORS (Cross-Origin Resource Sharing) es un mecanismo que controla la comunicacion segura entre diferentes origenes. Los errores de configuracion pueden provocar riesgos de seguridad o mal funcionamiento. Con Claude Code, puedes implementar con precision la configuracion CORS adecuada a tus requisitos.

Conceptos basicos de CORS

Flujo de solicitud preflight

> Explica el mecanismo de solicitudes preflight de CORS.
> Incluye un diagrama de secuencia.

El navegador envia una solicitud preflight con el metodo OPTIONS para solicitudes “no simples”, verificando la autorizacion del servidor. Esto aplica a encabezados personalizados, solicitudes POST con formato JSON, entre otros.

Configuracion en Express.js

Configuracion CORS por entorno

> Crea la configuracion CORS para Express.js.
> Requisitos:
> - En produccion solo permitir origenes especificos
> - En desarrollo permitir localhost
> - Soporte para solicitudes con autenticacion
> - Cache de preflight

// src/middleware/cors.ts
import cors from 'cors';

const allowedOrigins: Record<string, string[]> = {
  production: [
    'https://myapp.example.com',
    'https://admin.example.com',
  ],
  development: [
    'http://localhost:3000',
    'http://localhost:5173',
  ],
};

export const corsMiddleware = cors({
  origin: (origin, callback) => {
    const env = process.env.NODE_ENV || 'development';
    const origins = allowedOrigins[env] || allowedOrigins.development;

    // Permitir comunicacion entre servidores (sin origin)
    if (!origin) return callback(null, true);

    if (origins.includes(origin)) {
      callback(null, true);
    } else {
      callback(new Error(`CORS: ${origin} no esta permitido`));
    }
  },
  credentials: true,
  methods: ['GET', 'POST', 'PUT', 'DELETE', 'PATCH'],
  allowedHeaders: ['Content-Type', 'Authorization', 'X-Request-ID'],
  exposedHeaders: ['X-Total-Count', 'X-Request-ID'],
  maxAge: 86400, // Cache de preflight: 24 horas
});

Configuracion en Next.js

// next.config.js
const nextConfig = {
  async headers() {
    return [
      {
        source: '/api/:path*',
        headers: [
          { key: 'Access-Control-Allow-Origin', value: 'https://myapp.example.com' },
          { key: 'Access-Control-Allow-Methods', value: 'GET,POST,PUT,DELETE' },
          { key: 'Access-Control-Allow-Headers', value: 'Content-Type,Authorization' },
          { key: 'Access-Control-Allow-Credentials', value: 'true' },
          { key: 'Access-Control-Max-Age', value: '86400' },
        ],
      },
    ];
  },
};

Configuracion CORS en Nginx/CDN

> Agrega configuracion CORS al reverse proxy de Nginx.

location /api/ {
    if ($request_method = 'OPTIONS') {
        add_header 'Access-Control-Allow-Origin' $http_origin;
        add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE';
        add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization';
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Access-Control-Max-Age' 86400;
        return 204;
    }

    add_header 'Access-Control-Allow-Origin' $http_origin always;
    add_header 'Access-Control-Allow-Credentials' 'true' always;

    proxy_pass http://backend;
}

Solucion de problemas

Errores comunes y soluciones

Si pegas el error de la consola del navegador en Claude Code, te indicara inmediatamente la causa y el metodo de correccion.

Ejemplo de error:

Access to XMLHttpRequest at 'https://api.example.com/data' from origin
'https://myapp.com' has been blocked by CORS policy: No
'Access-Control-Allow-Origin' header is present on the requested resource.

Causas comunes:

• No se han configurado los encabezados CORS en el servidor
• Se especifica Access-Control-Allow-Origin: * al usar credentials: true (se debe especificar un origen especifico)
• No se maneja el metodo OPTIONS de la solicitud preflight

Consideraciones de seguridad

Access-Control-Allow-Origin: * solo debe usarse para APIs publicas que no requieren autenticacion. Para solicitudes con autenticacion, siempre debes especificar un origen concreto y combinarlo con credentials: true.

Resumen

Con Claude Code, puedes implementar con precision la configuracion CORS segun el entorno y optimizar la solucion de problemas. Consulta tambien la configuracion de encabezados de seguridad web y la guia de desarrollo de API.

Para mas detalles sobre CORS, consulta MDN Web Docs - CORS.