koakh/app.html

## app.html
<template>
  <h1>${message}</h1>
  <pre>data:[${data}]</pre>
  <ul>
    <!--
    <li repeat.for="user of users">
      ${user.login}
    </li>
    -->
  </ul>
</template>

## app.js
import { inject } from 'aurelia-framework';
import { HttpClient } from 'aurelia-fetch-client';

// Update #1

@inject(HttpClient)
export class App {
  message = 'Hello World!';
  users = null;
  data = null;
  httpClient;

  constructor(httpClient) {
    this.httpClient = httpClient;
  }

  activate() {
    console.log('Config');
    this.httpClient.configure(config => {
      config
        .withBaseUrl('https://koakh.com:8084/api/')
        .withDefaults({
          credentials: 'same-origin',
          headers: {
            'Accept': 'application/json',
            'X-Requested-With': 'Fetch'
          },
          mode: 'no-cors'
        })
        .withInterceptor({
          request(request) {
            console.log(`Requesting ${request.method} ${request.url}`);
            let authHeader = 'Bearer eyJhbGciOiJSUzI1NiIsInR5cCIgOiAiSldUIiwia2lkIiA6ICJKVUNoTEVnZkYzNjBXRWg0dzJ4OVFneEhqamhYUzN6Y0gyLW5helQ1clNnIn0.eyJqdGkiOiI4MTJhM2RhOC04YWNiLTQ3NWQtYWY4MC1lNzllMWI2ZWMwMjIiLCJleHAiOjE1MTM4NTQ4MDIsIm5iZiI6MCwiaWF0IjoxNTEzODU0NTAyLCJpc3MiOiJodHRwczovL2F1dGgua29ha2guY29tL2F1dGgvcmVhbG1zL0RlbW8tUmVhbG0iLCJhdWQiOiJhdXJlbGlhLW9wZW5pZC1jb25uZWN0LXRvLWtleWNsb2FrIiwic3ViIjoiZTllM2EzMDktMzkwYS00MzJjLWIxNjQtOGM3NjJiNzE3MzRjIiwidHlwIjoiQmVhcmVyIiwiYXpwIjoiYXVyZWxpYS1vcGVuaWQtY29ubmVjdC10by1rZXljbG9hayIsImF1dGhfdGltZSI6MTUxMzg1Mzg5OSwic2Vzc2lvbl9zdGF0ZSI6IjBlZTZkOTM0LTM3NzAtNGU5Yy1iMjZjLTI5ZjliMTY1YjFmYiIsImFjciI6IjAiLCJjbGllbnRfc2Vzc2lvbiI6IjlmYjU3NDIzLTY0ZTktNDcxNC1iZmU0LTdjNmUzYzU4ZDAwMyIsImFsbG93ZWQtb3JpZ2lucyI6WyJodHRwOi8vbG9jYWxob3N0OjkwMDAiXSwicmVhbG1fYWNjZXNzIjp7InJvbGVzIjpbInJlYWQtdG9rZW4iLCJtYW5hZ2VyIiwiYWRtaW4iLCJ1bWFfYXV0aG9yaXphdGlvbiJdfSwicmVzb3VyY2VfYWNjZXNzIjp7ImJyb2tlciI6eyJyb2xlcyI6WyJyZWFkLXRva2VuIl19LCJhY2NvdW50Ijp7InJvbGVzIjpbIm1hbmFnZS1hY2NvdW50Iiwidmlldy1wcm9maWxlIl19fSwibmFtZSI6Ik3DoXJpbyBNb250ZWlybyIsInByZWZlcnJlZF91c2VybmFtZSI6Im1hcmlvYW1tb250ZWlyb0BnbWFpbC5jb20iLCJnaXZlbl9uYW1lIjoiTcOhcmlvIiwiZmFtaWx5X25hbWUiOiJNb250ZWlybyIsImVtYWlsIjoibWFyaW9hbW1vbnRlaXJvQGdtYWlsLmNvbSJ9.ZNMFTRIh2xt1DSpZOCoVcaCKb-NNM5Cw-DC8UrGhIigaJdacsgZsHECcOZzuVtKcIXPCnxoPXKouxy5NC68faq7ozEB8H7xG2Xz2gi6P3Aco1hxSXId2fGqtHTNBCYrbqwtVp7t5Ot1d-p8sYjgQvwUCXGZKRcpfaYp6vwApsSOpeIhMnJVaxvk4AoNYZuUQKKGECJitP8vUGqk2o3wU5YhF1w8vlK4IG0WpySCPq0BBNajF5dGBzHo9_uNiu4AEfQMVSEVbJNkysCYCCuHvUjUJDukkSBn_BgXOVT_CpxjOZ2cBPPM-YkRWrCyijpkW_DfZwoGddN-jVnbjEuMKCA';
            request.headers.append('Authorization', authHeader);
            return request;
          },
          response(response) {
            console.log(`Received ${response.status} ${response.url}`);
            return response;
          }
        });
    }).fetch('user')
      .then(response => response.json())
      .then(data => {
        this.data = data;
      })
      .catch(error => {
        this.data = error;
      });
  }
}

## index.html
<!doctype html>
<html>
  <head>
    <title>Aurelia</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body aurelia-app>
    <h1>Loading...</h1>

    <script src="https://jdanyow.github.io/rjs-bundle/node_modules/requirejs/require.js"></script>
    <script src="https://jdanyow.github.io/rjs-bundle/config.js"></script>
    <script>
      require.config({
        paths: {
          "aurelia-fetch-client": "https://jdanyow.github.io/rjs-bundle/node_modules/aurelia-fetch-client/dist/amd/aurelia-fetch-client"
        }
      })
    </script>
    <script src="https://jdanyow.github.io/rjs-bundle/bundles/aurelia.js"></script>
    <script src="https://jdanyow.github.io/rjs-bundle/bundles/babel.js"></script>
    <script>
      require(['aurelia-bootstrapper']);
    </script>
  </body>
</html>
	<template>
	<h1>${message}</h1>
	<pre>data:[${data}]</pre>
	<ul>
	<!--
	<li repeat.for="user of users">
	${user.login}
	</li>
	-->
	</ul>
	</template>
	import { inject } from 'aurelia-framework';
	import { HttpClient } from 'aurelia-fetch-client';

	// Update #1

	@inject(HttpClient)
	export class App {
	message = 'Hello World!';
	users = null;
	data = null;
	httpClient;

	constructor(httpClient) {
	this.httpClient = httpClient;
	}

	activate() {
	console.log('Config');
	this.httpClient.configure(config => {
	config
	.withBaseUrl('https://koakh.com:8084/api/')
	.withDefaults({
	credentials: 'same-origin',
	headers: {
	'Accept': 'application/json',
	'X-Requested-With': 'Fetch'
	},
	mode: 'no-cors'
	})
	.withInterceptor({
	request(request) {
	console.log(`Requesting ${request.method} ${request.url}`);
	let authHeader = 'Bearer eyJhbGciOiJSUzI1NiIsInR5cCIgOiAiSldUIiwia2lkIiA6ICJKVUNoTEVnZkYzNjBXRWg0dzJ4OVFneEhqamhYUzN6Y0gyLW5helQ1clNnIn0.eyJqdGkiOiI4MTJhM2RhOC04YWNiLTQ3NWQtYWY4MC1lNzllMWI2ZWMwMjIiLCJleHAiOjE1MTM4NTQ4MDIsIm5iZiI6MCwiaWF0IjoxNTEzODU0NTAyLCJpc3MiOiJodHRwczovL2F1dGgua29ha2guY29tL2F1dGgvcmVhbG1zL0RlbW8tUmVhbG0iLCJhdWQiOiJhdXJlbGlhLW9wZW5pZC1jb25uZWN0LXRvLWtleWNsb2FrIiwic3ViIjoiZTllM2EzMDktMzkwYS00MzJjLWIxNjQtOGM3NjJiNzE3MzRjIiwidHlwIjoiQmVhcmVyIiwiYXpwIjoiYXVyZWxpYS1vcGVuaWQtY29ubmVjdC10by1rZXljbG9hayIsImF1dGhfdGltZSI6MTUxMzg1Mzg5OSwic2Vzc2lvbl9zdGF0ZSI6IjBlZTZkOTM0LTM3NzAtNGU5Yy1iMjZjLTI5ZjliMTY1YjFmYiIsImFjciI6IjAiLCJjbGllbnRfc2Vzc2lvbiI6IjlmYjU3NDIzLTY0ZTktNDcxNC1iZmU0LTdjNmUzYzU4ZDAwMyIsImFsbG93ZWQtb3JpZ2lucyI6WyJodHRwOi8vbG9jYWxob3N0OjkwMDAiXSwicmVhbG1fYWNjZXNzIjp7InJvbGVzIjpbInJlYWQtdG9rZW4iLCJtYW5hZ2VyIiwiYWRtaW4iLCJ1bWFfYXV0aG9yaXphdGlvbiJdfSwicmVzb3VyY2VfYWNjZXNzIjp7ImJyb2tlciI6eyJyb2xlcyI6WyJyZWFkLXRva2VuIl19LCJhY2NvdW50Ijp7InJvbGVzIjpbIm1hbmFnZS1hY2NvdW50Iiwidmlldy1wcm9maWxlIl19fSwibmFtZSI6Ik3DoXJpbyBNb250ZWlybyIsInByZWZlcnJlZF91c2VybmFtZSI6Im1hcmlvYW1tb250ZWlyb0BnbWFpbC5jb20iLCJnaXZlbl9uYW1lIjoiTcOhcmlvIiwiZmFtaWx5X25hbWUiOiJNb250ZWlybyIsImVtYWlsIjoibWFyaW9hbW1vbnRlaXJvQGdtYWlsLmNvbSJ9.ZNMFTRIh2xt1DSpZOCoVcaCKb-NNM5Cw-DC8UrGhIigaJdacsgZsHECcOZzuVtKcIXPCnxoPXKouxy5NC68faq7ozEB8H7xG2Xz2gi6P3Aco1hxSXId2fGqtHTNBCYrbqwtVp7t5Ot1d-p8sYjgQvwUCXGZKRcpfaYp6vwApsSOpeIhMnJVaxvk4AoNYZuUQKKGECJitP8vUGqk2o3wU5YhF1w8vlK4IG0WpySCPq0BBNajF5dGBzHo9_uNiu4AEfQMVSEVbJNkysCYCCuHvUjUJDukkSBn_BgXOVT_CpxjOZ2cBPPM-YkRWrCyijpkW_DfZwoGddN-jVnbjEuMKCA';
	request.headers.append('Authorization', authHeader);
	return request;
	},
	response(response) {
	console.log(`Received ${response.status} ${response.url}`);
	return response;
	}
	});
	}).fetch('user')
	.then(response => response.json())
	.then(data => {
	this.data = data;
	})
	.catch(error => {
	this.data = error;
	});
	}
	}
	<!doctype html>
	<html>
	<head>
	<title>Aurelia</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	</head>
	<body aurelia-app>
	<h1>Loading...</h1>

	<script src="https://jdanyow.github.io/rjs-bundle/node_modules/requirejs/require.js"></script>
	<script src="https://jdanyow.github.io/rjs-bundle/config.js"></script>
	<script>
	require.config({
	paths: {
	"aurelia-fetch-client": "https://jdanyow.github.io/rjs-bundle/node_modules/aurelia-fetch-client/dist/amd/aurelia-fetch-client"
	}
	})
	</script>
	<script src="https://jdanyow.github.io/rjs-bundle/bundles/aurelia.js"></script>
	<script src="https://jdanyow.github.io/rjs-bundle/bundles/babel.js"></script>
	<script>
	require(['aurelia-bootstrapper']);
	</script>
	</body>
	</html>