Guide complet de configuration CORS avec Claude Code

Implémenter correctement la configuration CORS avec Claude Code

CORS (Cross-Origin Resource Sharing) est un mécanisme qui contrôle la communication sécurisée entre différentes origines. Une mauvaise configuration peut entraîner des risques de sécurité ou des dysfonctionnements. Avec Claude Code, vous pouvez implémenter avec précision une configuration CORS adaptée à vos besoins.

Concepts fondamentaux de CORS

Flux de requête preflight

> Explique le mécanisme des requêtes preflight CORS.
> Inclus un diagramme de séquence.

Le navigateur envoie une requête preflight avec la méthode OPTIONS pour les « requêtes non simples », afin de vérifier l’autorisation du serveur. Cela concerne les en-têtes personnalisés, les requêtes POST au format JSON, etc.

Configuration avec Express.js

Configuration CORS par environnement

> Crée la configuration CORS pour Express.js.
> Exigences :
> - En production, n'autoriser que des origines spécifiques
> - En développement, autoriser localhost
> - Support des requêtes avec authentification
> - Cache 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;

    // Communication serveur-serveur (sans origin) autorisée
    if (!origin) return callback(null, true);

    if (origins.includes(origin)) {
      callback(null, true);
    } else {
      callback(new Error(`CORS : ${origin} n'est pas autorisé`));
    }
  },
  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 preflight : 24 heures
});

Configuration avec 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' },
        ],
      },
    ];
  },
};

Configuration CORS avec Nginx/CDN

> Ajoute la configuration CORS sur le reverse proxy 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;
}

Dépannage

Erreurs courantes et solutions

En collant l’erreur de la console du navigateur à Claude Code, il vous indique immédiatement la cause et la méthode de correction.

Exemple d’erreur :

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.

Causes courantes :

• Les en-têtes CORS ne sont pas configurés côté serveur
• Utilisation de Access-Control-Allow-Origin: * avec credentials: true (il faut spécifier une origine précise)
• La méthode OPTIONS pour les requêtes preflight n’est pas gérée

Notes de sécurité

Access-Control-Allow-Origin: * ne doit être utilisé que pour les API publiques ne nécessitant pas d’authentification. Pour les requêtes avec authentification, vous devez toujours spécifier une origine précise et la combiner avec credentials: true.

Résumé

Avec Claude Code, vous pouvez implémenter avec précision la configuration CORS adaptée à votre environnement et optimiser le dépannage. Consultez aussi la configuration des en-têtes de sécurité web et le guide de développement API.

Pour plus de détails sur CORS, consultez MDN Web Docs - CORS.