FIX: Kein Access-Control-allow-Origin-Header-Fehler in Angular

Eine der häufigsten Fehlermeldungen, die Angular-Entwicklern bei ihrer täglichen Arbeit begegnen können, ist: kein access-control-allow-origin-Header auf der angeforderten Ressource vorhanden.

Dies ist kein spezifisches Angular-Problem, sondern ein CORS (Cross-Origin Resource Sharing) Header-Problem. Dies könnte bedeuten, dass der Back-End-Server so konfiguriert ist, dass er an einem anderen Port oder einer anderen Domäne arbeitet.

---

Wie behebe ich den Fehler Keine Zugriffssteuerung unter Windows 10?

1. Nehmen Sie Änderungen auf Serverebene vor

Wenn Sie Zugriff auf den Server haben, aktivieren Sie CROS-Anfragen durch Hinzufügen von Zugriffskontrolle-Zulassen-Herkunft: * Header. Danach konfigurieren kors Eintrag, unter system.webServer im web.config Datei, wie im Beispiel unten.

• ”1.0″?
• aktiviert="wahr">
• Herkunft=“ https://someorigin.domain.com”>
• Methode="ERHALTEN"/>
• Methode="KOPF"/>
• </system.webServer>

Hier, kors erlaubt ERHALTEN und KOPF Anfragen von https://someorigin.domain.com/.

Auch, wenn Sie verwenden IIS (Internetinformationsdienste) du müsstest herunterladen IIS CORS-Modul.

Achten Sie darauf, eine Domäne oder eine Liste von Domänen anstelle von * anzugeben. Andernfalls würden ursprungsübergreifende Anforderungen an den Server von überall aktiviert.

Auf Apache, in der Konfigurationsdatei müssen Sie die Zeile hinzufügen Header-Set Access-Control-Allow-Origin ‘*’. Auch hier ist es ratsam, das „*“ durch eine Liste der Quellen zu ersetzen, von denen die Anfragen gestellt werden.

---

2. Führen Sie Ihren eigenen Proxy-Server aus

1. Zuerst erstellen wir eine Proxy-Konfigurationsdatei im Angular-Stammordner namens src/proxy.conf.json, und schreibe folgenden Code hinein:
   • {"/api":
   • "Ziel":" http://localhost: 6000","secure": false }
   • }
2. Zweitens in der angular.jsonDatei, fügen Sie die proxyConfigOption in der Dienen Ziel:
   • "Dienen": {
   • "Baumeister":" ",
     
   • "Optionen":{"proxyConfig":"src/proxy.conf.json"}
     
   • }
3. Führen Sie nun die aktuelle Konfiguration mit dem ng dienen Befehl.

Ein Proxy-Server würde Ihre Anfragen an den Remote-Server weiterleiten. Als nächstes werden wir sehen, wie man einen Proxy-Server konfiguriert.

Datenanfragen in Angular sind API-Aufrufe an localhost auf Port 4200, wie hier:

• http://localhost: 4200/api/datareq.

Im obigen Beispiel haben wir jedoch angenommen, dass die angeforderten Daten bei data dieser Ort:

• http://localhost: 6000/api/datareq.

---

Interessiert an guten Proxy-Lösungen? Sehen Sie sich diese Liste spezieller Tools an

---

3. DAktivieren Sie die Same Origin Policy in Ihrem Browser

Hinweis: Diese spezielle Methode wird nicht empfohlen, da dies Ihren Browser (und Ihr System) großen Sicherheitsrisiken aussetzen kann.

Wenn alles andere nicht funktioniert, können Sie die Same Origin Policy im Browser deaktivieren. Seien Sie jedoch vorsichtig, da dies Ihren Browser (und Ihr System) großen Sicherheitsrisiken aussetzen würde.

Zum Google Chrome, öffnen Sie in Windows 10 die Eingabeaufforderung als Administrator und führen Sie den folgenden Befehl aus:

C: Programmdateien (x86)GoogleChromeApplicationchrome.exe" --disable-web-security --disable-gpu --user-data-dir=~/chromeTemp..

Abschließend, kein access-control-allow-origin-Header auf der angeforderten Ressource vorhanden Fehlermeldung ist ein serverseitiges Problem.

Für Angular-Entwickler sollte das Ändern der Serverkonfiguration oder die Verwendung eines Proxyservers problemlos funktionieren.

Sagen Sie uns im Kommentarbereich unten, was Sie von diesem Leitfaden halten.

---

---