Cross-Origin-Resource-Sharing (CORS) auf Fujitsus K5-Plattform

2017-03-24

Machine-translated — the English original is authoritative.

Entwickler, die ihre Frontend-App-Entwicklung von einer Produktionsumgebung, in der Sie sich innerhalb einer einzigen Domain befinden, z. B. https://allthingscloud.eu, in eine lokale „Desktop“-Umgebung verlegt haben, in der Sie nun Anfragen von http://localhost aus stellen, werden mit diesem Fehler vertraut sein:

Es handelt sich um einen Sicherheitsmechanismus, der in fast allen modernen Webbrowsern integriert ist und dazu dient, bösartige Angriffe wie Cross-Site-Scripting zu verhindern.

Es gibt zwei Möglichkeiten, dieser Herausforderung zu begegnen, vorausgesetzt, Sie haben einen legitimen Bedarf, domänenübergreifend zu arbeiten:

Aktivieren Sie die CORS-Unterstützung auf Ihrem Zielserver – wenn Sie den betreffenden Webserver besitzen oder Zugriff darauf haben, können Sie CORS auf dem Webserver über einige grundlegende HEADERs aktivieren. Es gibt einen großartigen Blog hier, der die Header-Anforderungen abdeckt. Bitte stellen Sie sicher, dass Sie Ihre Client- und Server-Header nicht vermischen, sonst erwartet Sie eine lange Nacht des Debuggens! Wenn der Zielserver jedoch kein CORS unterstützt oder Sie keine Berechtigung haben, die Änderungen vorzunehmen, benötigen Sie einen anderen Workaround wie….
CORS-Proxy-Server – dies ist ein einfacher Server, der auf Ihre Webbrowser-Anfragen hört und dann dieselbe Anfrage als Server und nicht als Browser weiterleitet, wodurch die CORS-Herausforderung vollständig umgangen wird. Es ist ein Man-in-the-Middle-Ansatz, aber für gute Zwecke statt für schlechte 🙂

Fujitsus K5-API-Endpunkte unterstützen derzeit kein CORS, daher habe ich mich während meiner jüngsten Entwicklungsherausforderung für einen CORS-Proxy entschieden. Dies ist viel einfacher, als es klingt, insbesondere wenn Sie gerne mit NodeJS arbeiten. Es stehen viele NPM-Module zur Verfügung, die nur eine oder zwei Codezeilen erfordern, um einen CORS-Proxy-Server zu implementieren. Zum Beispiel corsproxy und corsproxy-https. Nach einigen Tests entschied ich mich jedoch für das cors-anywhere-Modul, da dieses Modul sowohl den HTTP-Antwortkörper ALS AUCH die Antwort-Header weiterleitet – etwas, nicht alle Proxies sich die Mühe machen.

Der einfache Proxy-Server sieht so aus:

Diese Datei enthält versteckte oder bidirektionale Unicode-Zeichen, die anders interpretiert oder kompiliert werden könnten als das, was unten angezeigt wird. Um sie zu überprüfen, öffnen Sie die Datei in einem Editor, der versteckte Unicode-Zeichen anzeigt.
Erfahren Sie mehr über bidirektionale Unicode-Zeichen

Versteckte Zeichen anzeigen


	// Heroku definiert die Umgebungsvariable PORT und erfordert, dass die Bindungsadresse 0.0.0.0 ist
	var host = process.env.PORT ? '0.0.0.0' : '127.0.0.1';
	var port = process.env.PORT

	var cors_proxy = require('cors-anywhere');
	cors_proxy.createServer({
	originWhitelist: [], // Alle Origins zulassen
	//requireHeader: ['origin', 'x-subject-token'],
	}).listen(port, host, function() {
	console.log('Running CORS Anywhere on ' + host + ':' + port);
	});

view raw
cors_proxy_service.js
hosted with ❤ by GitHub

Die Angular-2-Anwendung, in der ich sie verwendet habe, kann hier heruntergeladen werden – https://github.com/allthingsclowd/K5_Angular_2_Example_Login

Happy Stacking!

withk5youcan

Originally published on allthingscloud.eu (2017-03-24).