azurehttpaureliaazure-mobile-services

Aurelia web application calling azure mobile services API endpoint


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);
    });
}
}

Solution

  • 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);
    });
    }
    }