Aurelia web application calling azure mobile services API endpoint - azure

Question

I am creating an Aurelia web project that will consume an API. The API is housed as an Azure Mobile Service. I know I need to add the X-ZUMO Auth header to the request. But, when I instantiate my http client, that header never makes it to the request headers according to the browser dev tools.When I run this in my application, I am presented with a login screen I presume because the X-ZUMO header is not present so the app doesn't have permissions to run. I am running this using gulp which is setting up a local instance of the web application for me. I also tried the external IP address.
Here is my class:
import {HttpClient} from 'aurelia-http-client';
export class WebApi
{
static inject = [HttpClient];
constructor(http)
{
this.http = http;
this.baseUrl = 'https://myProject.azure-mobile.net/';
this.zumoHeader = 'X-ZUMO-APPLICATION';
this.zumoKey = 'zumoKey';
this.client = new HttpClient()
.configure(x => {
x.withBaseUrl(this.baseUrl);
x.withHeader(this.zumoHeader, this.zumoKey);
});
}
// requests will go here
testGet()
{
this.client.jsonp('api/logs?application_id=sessionID&__count=20')
.then(response =>
{
alert(response);
});
}
}

Answer 1

Turns out, you can't use the jsonp method in this instance. The get method(if you're making a get request) is the only way the headers will get added.
After this, I had to make sure the server could handle CORS as well.
import {HttpClient} from 'aurelia-http-client';
export class WebApi
{
static inject = [HttpClient];
constructor(http)
{
this.http = http;
this.baseUrl = 'https://myProject.azure-mobile.net/';
this.zumoHeader = 'X-ZUMO-APPLICATION';
this.zumoKey = 'zumoKey';
this.client = new HttpClient()
.configure(x => {
x.withBaseUrl(this.baseUrl);
x.withHeader(this.zumoHeader, this.zumoKey);
});
}
// requests will go here
testGet()
{
this.client.get('api/logs?application_id=sessionID&__count=20')
.then(response =>
{
alert(response);
});
}
}