Cross-Origin-Resource-Sharing (CORS) en la plataforma K5 de Fujitsu

2017-03-24

Machine-translated — the English original is authoritative.

Cualquier desarrollador que haya trasladado el desarrollo de su aplicación front-end desde un entorno de producción donde se encuentra dentro de un mismo dominio, por ejemplo https://allthingscloud.eu, a un entorno local de 'escritorio' donde ahora realiza solicitudes desde http://localhost, estará familiarizado con este error:

Es un mecanismo de seguridad integrado en casi todos los navegadores web modernos diseñado para prevenir ataques maliciosos como el cross-site-scripting (inyección de scripts entre sitios).

Existen dos formas de abordar este desafío, siempre que tenga una necesidad legítima de trabajar entre diferentes dominios:

Habilitar el soporte CORS en su servidor de destino: si posee o tiene acceso al servidor web en cuestión, puede habilitar CORS en el servidor web mediante algunas cabeceras (HEADERs) básicas. Hay un excelente blog aquí que cubre los requisitos de las cabeceras; asegúrese de no mezclar sus cabeceras de cliente y servidor, o se enfrentará a una larga noche de depuración. Sin embargo, si el servidor de destino no admite CORS o no tiene permiso para realizar los cambios, necesitará otro método alternativo, como….
Servidor Proxy CORS: este es un servidor simple que escucha las solicitudes de su navegador web y luego simplemente reenvía la misma solicitud como un servidor en lugar de un navegador, eludiendo así el desafío CORS por completo. Es un enfoque de hombre en el medio, pero con buenas intenciones 🙂

Los puntos de conexión (endpoints) de la API de Fujitsu K5 no admiten CORS actualmente, por lo que opté por un Proxy CORS durante mi reciente desafío de desarrollo. Esto es mucho más fácil de lo que parece, especialmente si le gusta trabajar con NodeJS. Hay muchos módulos NPM disponibles que requieren solo una o dos líneas de código para implementar un servidor proxy CORS. Por ejemplo, corsproxy y corsproxy-https. Sin embargo, después de algunas pruebas, decidí utilizar el módulo cors-anywhere ya que este módulo reenvía tanto el cuerpo de la respuesta http COMO las cabeceras de respuesta, algo que no todos los proxies se molestan en hacer.

El servidor proxy simple se ve así:

Este archivo contiene texto Unicode oculto o bidireccional que puede interpretarse o compilarse de manera diferente a lo que aparece a continuación. Para revisarlo, abra el archivo en un editor que revele caracteres Unicode ocultos.
Más información sobre caracteres Unicode bidireccionales

Mostrar caracteres ocultos


	// Heroku define la variable de entorno PORT, y requiere que la dirección de enlace sea 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: [], // Permitir todos los orígenes
	//requireHeader: ['origin', 'x-subject-token'],
	}).listen(port, host, function() {
	console.log('Ejecutando CORS Anywhere en ' + host + ':' + port);
	});

ver código original
cors_proxy_service.js
alojado con ❤ por GitHub

La aplicación Angular 2 donde la utilicé se puede descargar aquí – https://github.com/allthingsclowd/K5_Angular_2_Example_Login

¡Feliz apilamiento!

withk5youcan

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