Ionic 4 CORS Angular – 3 Lösungen Proxy, QuickFix, Header

Was bedeutet CORS? Wie löse ich den Fehler?

Ich möchte mal verstehen, warum CORS entsteht und wie ich diesen FÜR IMMER verhindern kann?

Folgende Fehlertypen kannst Du mit diesem Post lösen (Angular, Ionic, JavaScript-Frameworks):

Firefox + Ionic 4 - CORS
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://cccc.de (Reason: additional information here).
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://xxxxx.de/. (Reason: CORS header 'Access-Control-Allow-Origin' does not match 'http://localhost:8100/')

Chrome + Ionic 4 - CORS
Cross-Origin Read Blocking (CORB) blocked cross-origin response https://xxxxxx.li/ with MIME type text/html. See https://www.chromestatus.com/feature/5629709824032768 for more details.
Access to XMLHttpRequest at 'https://xxxxx.li/' from origin 'http://localhost:8100' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The 'Access-Control-Allow-Origin' header has a value 'http://localhost:8100/' that is not equal to the supplied origin.

Edge + Ionic 4 - CORS
SEC7120: [CORS] The origin 'http://localhost:8100' did not find 'http://localhost:8100' in the Access-Control-Allow-Origin response header for cross-origin resource at 'https://xxxxxx.li/'.

Chrome + Angular Pure
Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access failed: Http failure response for (unknown url): 0 Unknown Error

Inhalt - Nie Wieder CORS!

Challange

Praxis

Konzept

Erweiterung

Grundlagen

Fertiges Ziel

1. Kapitel

Herausforderung & Ziel: CORS-Fehler verstehen + lösen

Herausforderung und Ziel
Herausforderung und Ziel

Wenn Du schon etwas mit Angular / Ionic gearbeitet hast, arbeitest Du Angulars HTTPModule. Die Anfänger frustriert der CORS-Fehler.

 

 

 

Heute will Ich Dir zeigen, warum der CORS-Fehler entsteht und wie Du den CORS Fehler kurzfristig und dauerhaft umgehen kannst.

Angular / Ionic nutzen JavaScripts XMLHttpRequest als technische Grundlage, um entfernete Webseiten mit GET und POST abzurufen. XMLHttpRequest benötigt kein Neuladen der Tabs. Bei PHP ist das Neuladen zwingend notwendig, weil der Server die Daten für den Client vorbereitet (server-seitiges Rendering).

Mehr Lesestoff: Alles zu GET / Post RFC

XMLHttpRequest cannot load https://api.example.com. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8100' is therefore not allowed access.

Ein Framework wie Angular / Ionic vereinfacht auf den ersten Blick die Nutzung des umständlichen JavaScript XMLHttpRequest. Die Wirklichkeit sieht anders aus.

2. Kapitel

Konzept: SOP, CORS, GET + POST

Konzept und Lösungsansatz
Konzept und Lösungsansatz

Ich zeige Dir, wie ein typischer GET- und POST-Anfrage abläuft und welche „Regeln“ Dein Browser ständig überprüfen muss.

 

 

 

Um den Fehler zu verstehen, möchte ich isoliert GET- und POST- Abfragen auf Basis des Angular / Ionic Framework entwickeln. Wir bauen ein simples User Interface mit zwei Buttons, um einen GET- und POST-Anfrage absenden zu können.

Ein Textfeld benötigt die Benutzeroberfläche unseres CORS-Demo-Projekts, um die Inhalte für die POST-Anfrage zu einzugeben.

Ein Angular-Provider / Service stellt das Angular Modul als Schnittstelle zum Internet dar.

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8100' is therefore not allowed access.

3. Kapitel

Grundlagen: Unterschiedliche Auflösungen. Gleiche App.

Theorie einfach erklärt
Grundlagen einfach erklärt

Bevor ich CORS erklären kann, möchte ich Dir die Same-Orign-Policy (SOP) näher bringen, weil diese mit dem CORS-Fehler unmittelbar zusammenhängt.

 

 

Unser Web soll sicher bleiben.

Die Same-Origin Policy (SOP) garantiert, dass der Browser ein  Webresource wie eine JavaScript- oderCSS-Dokument NUR von der GLEICHEN Domain laden darf.

Diese Regel unterbindet, dass ein Hacker mit XSS bösartigen Code über Deine Webseite auf den Geräten der Webseitennutzer ausführen kann.

In der Vergangenheit konnten Hacker bei Google Adsenes Werbung einkaufen. In der Werbung konnten sie JavaScript oder das veraltet Adobe Flash ausführen und Code von anderen Domänen laden. Der Code vom NICHT-GLEICHEN-URSPRUNG installierte Malware innerhalb vom Browsers oder hat Schadprogramme auf den Computer heruntergeladen.

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://lippke.li/. (Reason: CORS request did not succeed).

Corss-Origin Resource Sharing (CORS) dient die Sperre von Same-Origin Policy (SOP) zu umgehen. Dann kann Dein Browser auf die Script- und CSS-Dokumenten auf anderen Domains zugreifen.

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://lippke.li/. (Reason: CORS header 'Access-Control-Allow-Origin' does not match 'http://localhost:8100/').

Wer hätte’s gedacht CORS ist gut! – Wäre nicht die Anfänger unfreundliche Verwendung mit Angular.

Eine SIMPLE, grafische Erklärung von CORS und SOP

Wir gehen mal davon aus, dass Du eine neue fanzy Schriftart für Deine App / Webseite brauchst.

Um die kostenlose Schriftart von Google in Deine App einzubinden, musst Du eine HTTP-GET-Anfrage an den Google Server senden.

Folgende Bilderfolge zeigen (stark vereinfacht) wie die Datenströme aussehen könnten.

Deine Webseite fragt mit GET nach und erhält ein .ttf Schriftart-Datei als Antwort zurück. Leider ist das nicht so einfach, weil die Same-Origin-Policy (SOP) das verbietet.

So stellt sich ein GET ohne CORS vor
So stellt sich ein GET ohne CORS vor

In der Realität läuft es aber etwas anderes ab.

Auf den ersten Blick sieht es so aus, dass wir eine GET-Abfrage absenden können, aber keine Antwort von Google erhalten.

Same Origin Policy sagt nein
Same Origin Policy sagt nein

Bei Dir taucht nicht mal eine 40X oder 50X Fehler auf, sondern folgender Warnung erscheint in Deiner Web-Konsole.

"Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at $somesite" message: "Http failure response for https://lippke.li: 0 Unknown Error" name: "HttpErrorResponse" ok: false status: 0 statusText: "Unknown Error"

Bevor der Browser eine GET-Abfrage sendet, geht dem GET- eine OPTIONS-Anfrage zu vor.

Die OPTIONS-Anfrage ist wie ein Aufklärer / Späher im Krieg.

Die OPTIONS-Anfrage befragt den Server, welche Anfrage-Methoden der Server unterstützt. Die bekanntesten Abfragemeothoden sind GET, POST, HEAD, PUT und DELETE.

Der Server antwortet zur Überprüfung von CORS; ob dieser die Allow-Orign-*-Header gesetzt sind. Falls diese nicht gesetzt sind, versucht Dein Browser es nicht einmal die GET-Anfrage abzusenden.

Idalfall mit CORS
Idalfall mit CORS

Blöd.

4. Kapitel

Coden: LÖSUNG FÜR CORS

Coding und Umsetzung
Coding zur Umsetzung

Zur Beruhigung: Ich habe für Dich 3 Lösungswege im Angebot.

Überlege zu nächst, ob Du den Backendtyp(in) kennst oder nicht …

Hast Du diese Frage geklärt können wir EINEN, der drei Lösungsmöglichkeiten umsetzen.

 

 

CORS ist fast zu 100 % Backend-Programmierfehler (solange Du im Frontend nicht total unfähig bist).

Ich zeige Dir, wie Du die drei Lösungsansätze umsetzen kannst.

3 Lösungen für CORS
3 Lösungen für CORS

Fall #1: Du hast Kontrolle über das Backend / kennst den Backend-Depp

Setzte die CORS-Header mit PHP. Hier ein Beispiel:

Die GET- und POST-Anfragen sollten zu DIESEM Server funktionieren. Die OPTION-Anfrage sagt Deinem Browser, dass der Server CORS-fähig ist und die GET-Anfrage ihr Glück versuchen kann.

header(*) setzt die CORS_ Header und der Befehl
$_SERVER['REQUEST_METHOD'] == 'OPTIONS'
sagt dem OPTION Request, welche HTTP-Methoden möglich sind.

Fall #2: Du brauchst schnell eine Lösung und „sauberes“ Vorgehen ist Dir egal

Der folgende Abschnitt zeigt Dir schnellste Lösung. Später solltest Du Dir überlegen, ob Du nicht besser Fall 1 oder Fall 3 bearbeiten solltest.

In Firefox funktioniert das CORS-Everywhere Add-on am besten. https://addons.mozilla.org/de/firefox/addon/cors-everywhere/

CORS Everywhere Addon
CORS Everywhere Addon

Installiere Dir das Add-on, klicke auf das Symbol in der Toolbar, lade die Seite neu und BOOM - der CORS Fehler ist verschwunden.

In Chrome / Vivaldi (bzw. Chromium Engine Browser) funktioniert Vitvads CORS Plugin am besten.

https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi

Installiere Dir das Add-on, klicke auf das Symbol in der Toolbar und stelle den Schalter auf grün, lade die Seite neu und BOOM - der CORS Fehler ist verschwunden.

Sobald Du mit der Entwicklung Deiner App fertig bist, solltest Du Dir Gedanken über Fall 1 oder Fall 3 machen.

Fall #3: Du wirst den Backend-Deep NIE kennen.

Wenn Du eine langfristiger bombenfeste Lösung brauchst, empfehle ich Dir eine PHP-Proxy zu schreiben. Dieser funktioniert folgendermaßen:

  1. Der Proxy nimmt jede URL per GET-Parameter auf. Der $_GET Befehl extrahiert die entsprechende URL heraus und speichert diese in einer Variable ab.
  2. Der Proxy ruft die Inhalte vom Server ab. Dafür verwendet PHP die Funktionen des cURL-Pakets. Dort kannst Du noch weitere Einstellungen für die GET-Abfrage vornehmen
  3. Der Proxy fügt die Allow-Origins-*-Header an.
  4. Der Proxy antwortet Deiner App. Dazu schreibt PHP die empfangenen Bytes mit dem Echo-Befehl in die PHP-Datei hinein.

Dieser Proxy arbeitet mit JSON: 'Content-type: application/json' und G-Zipping zur Komprimierung header('Content-Encoding: gzip');

Praxis in Ionic

Erstelle eine Ionic Projekt mit

ionic start ioniccors tabs --type=angular

Für einen Provider für die HTTP-Traffic hinzu.

ionic g service corstester

Füge zwei Buttons und ein Textfeld in src > app >tab1> tab1.pages.html ein


TypeScript:

Provider:

5. Kapitel

Erweiterungen: CORS vernichten

Erweiterungen und Weiterführendes
Erweiterungen + mehr

Wenn Du CORS verstanden hast, kannst Du auch mit anderen HTTP-Methoden experimentieren.

Teste doch einmal:

DELETE – Kann Daten vom Server löschen

PUT – Kann Dateien auf dem Server verändern

TRACE – Zum Zurückverfolgen des HTTP Befehl

Erstelle einen Datenbank-Eintrag mit einem Post Befehl.

  1. Aktivere G-ZIP zur Komprimierung der Datenübertragung
  2. Setze die Standard-CORS-Header wie schon oben erwähnt
  3. Stelle eine Verbindung zur MySQL-Instanz her
  4. Mit file_get_contents erhälst Du den JSON-Inhalt
  5. Sende einen SQL-Befehl
  6. Schließe die Verbindung zur Datenbank
  7. Beende das G-zipping

6. Kapitel

Fazit: Nie Wieder Cors.

Ziel und Fazit
Ziel und Fazit

Ich hoffe, dass ich euch ein besseres Verständnis von CORS verschaffen konnte.

Teilt, schreibt einen Kommentar.

Viel Spaß beim Programmieren.

 

Credits zu den verwendeten Bildern
Icons made by Vectors Market from www.flaticon.com is licensed by CC 3.0 BY

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.