Cors-Fehler verstehen: „Zugriff auf die Subdomäne von der Hauptdomäne fehlgeschlagen: Kein „Access-Control-Allow-Origin““

Cross-Origin Resource Sharing (CORS) ist ein Mechanismus, der es verschiedenen Domänen ermöglicht, miteinander zu interagieren. Wenn ein API-Server auf einer Subdomäne ausgeführt wird und eine React-App auf der Hauptdomäne ausgeführt wird, können CORS-Fehler auftreten, z. B. der Fehler „Zugriff auf die Subdomäne von der Hauptdomäne fehlgeschlagen: Kein ‚Access-Control-Allow-Origin‘“.

Untersuchung des Problems

Untersuchen Sie die Preflight-Anfrage in den Chrome DevTools, um nach zwischengespeicherten Antworten und Preflight-Anfragen zu suchen. Führen Sie die Preflight-Anfrage mit einem Tool wie Curl aus und denken Sie daran, die Option -i hinzuzufügen, um die Antwortheader auszugeben.

Fallanalyse

• Fall 1: Dies Der Ansatz nutzt die standardmäßige CORS-Konfiguration, die einen Wildcard-Ursprung ermöglicht. Tests haben jedoch gezeigt, dass es ordnungsgemäß funktioniert.
• Fall 2: Das Anpassen der zulässigen Ursprünge, Methoden und Header erweist sich ebenfalls als erfolgreich.
• Fall 3: Die manuelle Handhabung von CORS-Headern ist eine weitere praktikable Lösung.

Auflösen des Problem

Fehlkonfiguration in der AWS Load Balancer-Zielgruppe (basierend auf der Lösung des OP)

Die Hauptursache für dieses spezielle Problem war eine Fehlkonfiguration in der AWS Load Balancer-Zielgruppe. Das Protokoll der Zielgruppe wurde auf HTTPS eingestellt, obwohl keine entsprechenden SSL-Zertifikate bereitgestellt wurden. Durch Korrigieren des Protokolls wurde das Problem behoben.

Tipps zum Debuggen

• Deaktivieren Sie das Caching in Chrome DevTools, um zwischengespeicherte Preflight-Antworten zu vermeiden.
• Senden Sie Preflight-Anfragen direkt an Ihren Dienst, um das Problem zu beheben Mögliche Proxy-Interferenz.
• Drucken Sie den Anforderungspuffer (z. B. mit httputil.DumpRequest) zum Debuggen Zwecke.