Vollständiger CORS-Konfigurationsleitfaden mit Claude Code

CORS-Konfiguration mit Claude Code korrekt implementieren

CORS (Cross-Origin Resource Sharing) ist ein Mechanismus zur Steuerung der sicheren Kommunikation zwischen verschiedenen Origins. Konfigurationsfehler führen zu Sicherheitsrisiken oder Funktionsstörungen. Mit Claude Code können Sie eine den Anforderungen entsprechende CORS-Konfiguration präzise implementieren.

CORS-Grundkonzepte

Ablauf eines Preflight-Requests

> Erkläre den Mechanismus von CORS-Preflight-Requests.
> Einschließlich Sequenzdiagramm.

Bei “nicht-einfachen Requests” sendet der Browser einen OPTIONS-Request als Preflight-Request, um die Erlaubnis des Servers zu prüfen. Dies betrifft unter anderem benutzerdefinierte Header und POST-Requests im JSON-Format.

Konfiguration in Express.js

Umgebungsspezifische CORS-Konfiguration

> Erstelle eine CORS-Konfiguration für Express.js.
> Anforderungen:
> - Produktion: nur bestimmte Origins erlauben
> - Entwicklung: localhost erlauben
> - Authentifizierte Requests unterstützen
> - Preflight-Cache

// 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;

    // Server-zu-Server-Kommunikation (ohne Origin) erlauben
    if (!origin) return callback(null, true);

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

Konfiguration in 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' },
        ],
      },
    ];
  },
};

CORS-Konfiguration in Nginx/CDN

> Füge CORS-Einstellungen zum Nginx-Reverse-Proxy hinzu.

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;
}

Fehlerbehebung

Häufige Fehler und Lösungen

Wenn Sie Claude Code die Browser-Konsolenfehler geben, erhalten Sie sofort Ursachen und Lösungen.

Fehlerbeispiel:

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.

Häufige Ursachen:

• Serverseitig sind keine CORS-Header gesetzt
• Bei credentials: true wird Access-Control-Allow-Origin: * verwendet (ein spezifischer Origin muss angegeben werden)
• Der OPTIONS-Methoden-Preflight-Request wird nicht behandelt

Sicherheitshinweise

Access-Control-Allow-Origin: * sollte nur für öffentliche APIs ohne Authentifizierung verwendet werden. Bei authentifizierten Requests muss immer ein spezifischer Origin angegeben und mit credentials: true kombiniert werden.

Zusammenfassung

Mit Claude Code können Sie umgebungsspezifische CORS-Konfigurationen präzise implementieren und die Fehlerbehebung effizienter gestalten. Siehe auch Web-Sicherheitsheader-Konfiguration und den API-Entwicklungsleitfaden.

Details zu CORS finden Sie in den MDN Web Docs - CORS.