Angular 2, OpenStack & CORS: The application simply takes your K5 credentials and makes a request to Keystone, the backend K5 authentication (identity) endpoint, and if these credentials are valid it presents your token back to you.

Angular2_OpenStack.md

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.