Ionic 4 CORS – Simple Erkärung + 3 Einfache Lösungen

Immer diese CORS Fehler!

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

Folgende Fehler kannst Du mit Diesem Post lösen:

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/'.

Inhalt - Nie Wieder CORS!

Herausforderung + Coding-Ziel

Coding zur Umsetzung

Coding-Ansatz + Konzept

Erweiterungen + Aufgaben

Grundlagen einfach erklärt

Fertiges Ziel / Ergebniss

1. Kapitel

Herausforderung & Ziel: CORS Fehler verstehen + lösen

Herausforderung und Ziel
Herausforderung und Ziel

Wenn Du schon etwas mit Angular / Ionic gearbeitet hast, konntest Du bestimmt Angulars HTTPModule testen. Leider frustriert der auftauchende der CORS Fehler viele Anfänger

 

 

 

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 Daten 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.

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.


Das Framework vereinfacht auf den ersten Blick die Nutzung des umständlichen JavaScript XMLHttpRequest. In Wirklichkeit verkompliziert dieser es aber auch.

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. Dazu bauen wir eine simples User Interface mit zwei Buttons GET und POST.

Wer etwas zu viel Zeit hat, kann sich dazu den RFC2616 durchlesen oder meine simplere Zusammenfassung in diesem Post.

Zusätzlich brauchen wir ein Textfeld, um die Inhalte für die POST-Anfrage zu erstellen.

Ein Angular-Provider/Service stellt die 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 CORS unmittelbar zusammenhängen.

 

 

Unser Web soll sicher bleiben.

Die SOP garantiert, dass der Browser ein JavaScript- und CSS-Dokument NUR von der GLEICHEN Domain laden darf. Diese Regel unterbindet, dass ein Hacker mit XSS bösartigen Code über Deien Webseite auf Deinem Gerät ausführen kann, indem sie den schadhaften Code von anderen Servern verlinkt.

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

CORS bzw Corss-Origin Resource Sharing dient dazu diese Speere von 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 Beginner-unfreundliche Verwendung mit Angular wäre.

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.


<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">

<style>
@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
</style>

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

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

"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 im 2. Weltkrieg.

Die OPTIONS-Anfrage befragt den Server, welche Anfrage-Methoden der Server unterstützt. Die Bekanntesten 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 kennst oder nicht…

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

  • Setze die CORS Header
  • Hole Dir ein CORS-Plugin
  • Schreibe einen Proxy

 

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 oder kennst einen Typen vom Backend

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

Jetzt sollten GET- und POST-Anfragen 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  $_SERVER['REQUEST_METHOD'] == 'OPTIONS' sagt dem OPTION Request, welche HTTP-Methoden möglich sind.

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

Auch, wenn ich Dir jetzt die schnelle Lösung zeige, solltest Du Dir später ü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.

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.

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 Typ von Backend 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. Die PHP-Funktion addCors() überprüft, ob bei der HTTP-Anfrage eventuell schon die Header gesetzt sind. Falls nicht, fügt die Funktion die Header an.
  4. Der Proxy antwortet Deiner App. Dazu schreibt PHP die empfangenen Bytes mit dem Echo-Befehl in die PHP-Datei hinein.

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 Befehls

 

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.