Heim  >  Artikel  >  Backend-Entwicklung  >  Warum erhält meine React-App beim Zugriff auf eine Subdomain-API einen CORS-Fehler: „Zugriff auf Subdomain von der Hauptdomäne fehlgeschlagen: Kein \'Access-Control-Allow-Origin\'\“?

Warum erhält meine React-App beim Zugriff auf eine Subdomain-API einen CORS-Fehler: „Zugriff auf Subdomain von der Hauptdomäne fehlgeschlagen: Kein \'Access-Control-Allow-Origin\'\“?

Mary-Kate Olsen
Mary-Kate OlsenOriginal
2024-10-31 07:59:30888Durchsuche

Why Does My React App Get a CORS Error When Accessing a Subdomain API:

Verstehen von CORS-Fehlern: „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 Subdomäne von 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 zeigen jedoch, dass es ordnungsgemäß funktioniert.
  • Fall 2: Auch die Anpassung der zulässigen Ursprünge, Methoden und Header erweist sich als erfolgreich.
  • Fall 3: Die manuelle Handhabung von CORS-Headern ist eine weitere praktikable Lösung.

Behebung des Problems

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

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.

Debugging-Tipps

  • Deaktivieren Sie das Caching in Chrome DevTools, um zwischengespeicherte Preflight-Antworten zu vermeiden.
  • Senden Sie Preflight-Anfragen direkt an Ihren Dienst, um sie zu beseitigen potenzielle Proxy-Interferenz.
  • Drucken Sie den Anforderungspuffer (z. B. mit httputil.DumpRequest) für Debug-Zwecke.

Das obige ist der detaillierte Inhalt vonWarum erhält meine React-App beim Zugriff auf eine Subdomain-API einen CORS-Fehler: „Zugriff auf Subdomain von der Hauptdomäne fehlgeschlagen: Kein \'Access-Control-Allow-Origin\'\“?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn