Angular/Ionic passing API key in header

Question

I am trying to write simple mobile app in Ionic3 that will display fornite/pubg stats for the user. I am aware that there are multiple apps with same functionality out there, but I am doing that just to get a hang on ionic.

API provider has only one requirement on their page:

To make use of our APIs we require you to use an API Key. To use the API key you need to pass it along as a header with your requests. TRN-Api-Key: xxx-xxx-xxx

So, I wrote:

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Http, Headers, RequestOptions } from '@angular/http';
import { HttpHeaders } from '@angular/common/http';
import 'rxjs/add/operator/map';

@Injectable()
export class StatsProvider {
  apiKey = 'xxx-xxx-xxx';
  apiUrl ='https://api.fortnitetracker.com/v1/profile/pc/emulgator_';

  constructor(public http: HttpClient) {
    console.log('Hello StatsProvider Provider');
  }

  getStats() {
    let headers = new HttpHeaders()
    headers = headers.set('TRN-Api-Key', this.apiKey)
    return this.http.get(this.apiUrl, {headers: headers}).map((res: Response) => res.json())
  }
}

After, I subscribe to that:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

import { StatsProvider } from '../../providers/stats/stats';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  stats: any;

  constructor(public navCtrl: NavController, private statsProvider: StatsProvider) {

  }

  ionViewWillEnter(){

    this.statsProvider.getStats().subscribe(stats => {
      console.log(stats);
    });
  }

}

But instead of response, I get bunch of errors in browser console:

https://api.fortnitetracker.com/v1/profile/pc/emulgator_ 404 ()

Failed to load https://api.fortnitetracker.com/v1/profile/pc/emulgator_: Response for preflight has invalid HTTP status code 404.
core.js:1350

ERROR HttpErrorResponse {headers: HttpHeaders, status: 0, statusText: "Unknown Error", url: null, ok: false, …}

What I am doing wrong?

404 error suggests that the endpoint you're passing isn't valid. — jme11
– jme11, Commented Mar 7, 2018 at 16:06

David · Accepted Answer · 2018-03-04 21:14:09Z

2

HttpHeaders are immutable

So you need to use

let headers = new HttpHeaders().set('TRN-Api-Key', this.apiKey);

or

let headers = new HttpHeaders({'TRN-Api-Key': this.apiKey});

Also, if you are using the new HttpClient, you don't need to use the map operator. You can just return directly

this.http.get(this.apiUrl, {headers: headers})

answered Mar 4, 2018 at 21:14

David

34.6k13 gold badges90 silver badges124 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

emulgator Over a year ago

Unfortunately exactly same problem still persists.

David Over a year ago

I read your post too fast. 404 error is not related to credentials. I tried an OPTION request in Postman on that URL and I get a 404 as well, so it's not related to angular. Can that API be used client side?

Collectives™ on Stack Overflow

Angular/Ionic passing API key in header

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related