K5_Angular_2_Example_Login

Update – 23/03/2017 – Angular 2 and K5 CORS challenge resolved…by using a lightweight CORS PROXY Server

See the cors_proxy_service.js for the solution.

https://github.com/allthingsclowd/K5_Angular_2_Example_Login

This repo has been put together to demonstrate how to work-around the CORS authentication challenges when building an Angular 2 SPA (Single Page Application) for Fujitsu’s K5 platform.

Challenge

They key challenge is that Fujitsu K5 does not currently support CORS which results in the following error:

“XMLHttpRequest cannot load https://identity.uk-1.cloud.global.fujitsu.com/v3/auth/tokens. 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:3000‘ is therefore not allowed access. The response had HTTP status code 404.”

When I try the suggestions in this detailed CORS blog – http://restlet.com/company/blog/2015/12/15/understanding-and-using-cors/
I get the following errors when I send the ‘preflight checks’ –

Solution

Use a CORS proxy server to accept your browser requests and forward them on as server requests thus by-passing the CORS (browser) issues.

Installation

Update 23/3/17 – Resolved by using a simple nodejs proxy service – see npm cors-anywhere module

• Install NodeJS (> v4) and NPM (> v3) from https://nodejs.org/en/download/, you can check the versions you have installed by running node -v and npm -v from the command line.
• git clone https://github.com/allthingsclowd/K5_Angular_2_Example_Login
• cd K5_Angular_2_Example_Login
• npm install –save-dev @angular/cli@latest
• npm install
• npm start

Update 23/3/17 – The above application has be configured to use the following proxy server

• Open a new terminal window
• npm install cors-anywhere
• cd to the cors_proxy_server folder
• node cors_proxy_service.js

Navigate to http://localhost:3000

Caution:

I’ve only hacked the authentication.service.ts file and the login.component.html to facilitate making the HTTP request to K5…there’s a lot more to do for a full SPA but this should be enough to get folks passed the initial authentication hurdles…..the only restriction now is your imagination.