Cross-Origin-Resource-Sharing (CORS) sulla piattaforma K5 di Fujitsu

2017-03-24

Machine-translated — the English original is authoritative.

Qualsiasi sviluppatore che abbia spostato lo sviluppo della propria applicazione front-end da un ambiente di produzione in cui si opera all'interno dello stesso dominio, ad esempio https://allthingscloud.eu, a un ambiente locale 'desktop' dove ora si effettuano richieste da http://localhost, conoscerà bene questo errore:

Si tratta di un meccanismo di sicurezza integrato nella quasi totalità dei browser web moderni, progettato per prevenire attacchi malevoli come lo cross-site-scripting.

Esistono due modi per affrontare questa sfida, a patto che si abbia una legittima necessità di operare tra domini diversi:

Abilitare il supporto CORS sul server di destinazione – se si possiede, o si ha accesso al webserver in questione, è possibile abilitare il CORS sul webserver tramite alcuni semplici HEADER. C'è un ottimo blog qui che copre i requisiti degli header; si prega di assicurarsi di non mescolare gli header del client e del server, altrimenti ci si troverà di fronte a una lunga notte di debug! Tuttavia, se il server di destinazione non supporta il CORS o non si ha il permesso di apportare le modifiche, sarà necessario un altro workaround, come….
CORS Proxy Server – questo è un server semplice che ascolta le richieste del proprio browser web e poi si limita a inoltrare la stessa richiesta come server anziché come browser, aggirando così del tutto la sfida CORS. È un approccio man-in-the-middle, ma per un fine buono piuttosto che cattivo 🙂

Gli endpoint API di Fujitsu K5 non supportano attualmente il CORS, quindi un CORS Proxy è ciò che ho scelto durante la mia recente sfida di sviluppo. Questo è molto più facile di quanto sembri, specialmente se si piace lavorare con NodeJS. Sono disponibili molti moduli NPM che richiedono solo una o due righe di codice per implementare un server proxy CORS. Ad esempio corsproxy e corsproxy-https. Tuttavia, dopo alcuni test, ho deciso di utilizzare il modulo cors-anywhere poiché questo modulo inoltra sia il corpo della risposta http che le intestazioni di risposta... qualcosa che non tutti i proxy si preoccupano di fare.

Il semplice server proxy appare così:

Questo file contiene caratteri Unicode nascosti o bidirezionali che potrebbero essere interpretati o compilati in modo diverso da quanto appare di seguito. Per rivederli, aprire il file in un editor che riveli i caratteri Unicode nascosti.
Maggiori informazioni sui caratteri Unicode bidirezionali

Mostra caratteri nascosti


	// Heroku definisce la variabile d'ambiente PORT e richiede che l'indirizzo di binding sia 0.0.0.0
	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: [], // Consenti tutti gli origin
	//requireHeader: ['origin', 'x-subject-token'],
	}).listen(port, host, function() {
	console.log('Esecuzione di CORS Anywhere su ' + host + ':' + port);
	});

visualizza il codice grezzo
cors_proxy_service.js
ospitato con ❤ da GitHub

L'applicazione Angular 2 in cui l'ho utilizzata può essere scaricata qui – https://github.com/allthingsclowd/K5_Angular_2_Example_Login

Happy Stacking!

withk5youcan

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