toolsmoah

CORS-Tester

Testen und debuggen Sie Cross-Origin Resource Sharing (CORS)-Richtlinien und API-Anfragen

Anfrageeinstellungen
Konfigurieren Sie Ihre API-Anfrage zum Testen
Beispielanfragen
Probieren Sie diese vordefinierten API-Anfragen aus
CORS-Informationen
Grundlegende Informationen zu CORS

Was ist CORS? CORS (Cross-Origin Resource Sharing) ist ein Mechanismus, der es Webbrowsern ermöglicht, Cross-Origin-Anfragen (unterschiedliche Domäne, Protokoll oder Port) von im Browser ausgeführten Skripten zu stellen.

Wichtige CORS-Header

  • Access-Control-Allow-Origin: Gibt an, welche Ursprünge auf die Ressource zugreifen dürfen
  • Access-Control-Allow-Methods: Gibt an, welche HTTP-Methoden zulässig sind
  • Access-Control-Allow-Headers: Gibt an, welche HTTP-Header verwendet werden können
  • Access-Control-Allow-Credentials: Gibt an, ob Anmeldeinformationen (Cookies, HTTP-Authentifizierung) enthalten sein sollen

💡 CORS-Lösungen

Serverseitige Lösungen

1. Express.js (Node.js):

const cors = require('cors');
          app.use(cors({
            origin: 'https://example.com',
            methods: ['GET', 'POST'],
            credentials: true
          }));

2. Spring Boot (Java):

@CrossOrigin(origins = "https://example.com")
          @RestController
          public class ApiController { ... }

Clientseitige Lösungen

1. Verwendung eines Proxyservers:

// package.json (React)
          "proxy": "http://localhost:3001"

2. JSONP (nur GET):

// Begrenzte, aber einfache Lösung
          fetch('api?callback=handleResponse')

🔧 CORS-Konfiguration nach Umgebung

Next.js

// next.config.js
          module.exports = {
            async headers() {
              return [
                {
                  source: '/api/:path*',
                  headers: [
                    {
                      key: 'Access-Control-Allow-Origin',
                      value: '*'
                    }
                  ]
                }
              ]
            }
          }

Nginx

location /api {
            add_header Access-Control-Allow-Origin *;
            add_header Access-Control-Allow-Methods 
              "GET, POST, OPTIONS";
            add_header Access-Control-Allow-Headers 
              "Content-Type, Authorization";
          }

Apache

# .htaccess
          Header always set Access-Control-Allow-Origin "*"
          Header always set Access-Control-Allow-Methods 
            "GET, POST, OPTIONS"
          Header always set Access-Control-Allow-Headers 
            "Content-Type, Authorization"

CORS-Konfiguration nach Umgebung

Testszenarien

  • • Einfache Anfrage: Testen Sie das grundlegende CORS-Verhalten mit GET-Anfragen
  • • Preflight-Anfrage: Testen Sie Preflight-Anfragen mit PUT/DELETE-Methoden
  • • Benutzerdefinierte Header: Testen Sie Anfragen mit dem Authorization-Header
  • • Anmeldeinformationen: Testen Sie Anfragen mit Cookies
  • • Fehlerbehandlung: Testen Sie Fehlerszenarien

Sicherheitsüberlegungen

  • • Seien Sie vorsichtig bei der Verwendung von Platzhaltern (*) aufgrund von Sicherheitsrisiken
  • • Prinzip der geringsten Rechte: Erlauben Sie nur notwendige Ursprünge und Methoden
  • • Einschränkungen für Anmeldeinformationen: Erlauben Sie nur bestimmte Ursprünge, wenn Anmeldeinformationen enthalten sind
  • • Regelmäßige Überprüfung: Überprüfen und aktualisieren Sie die CORS-Richtlinien regelmäßig

Tipps zur CORS-Fehlerbehebung

Browser-Entwicklertools

  • • Überprüfen Sie OPTIONS-Anfragen im Netzwerk-Tab
  • • Suchen Sie nach CORS-Fehlermeldungen in der Konsole
  • • Überprüfen Sie die CORS-Header in den Antwort-Headern

Nützliche Tools

  • • CORS-Tester (dieses Tool)
  • • Postman (für API-Tests)
  • • curl-Befehl (für direkte Server-Tests)