title: Angular/Ionic passing API key in header
body: <p>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. </p>
  
  <p>API provider has only one requirement on their page:  </p>
  
  <blockquote>
    <p>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</p>
  </blockquote>
  
  <p>So, I wrote:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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) =&gt; res.json())
    }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>After, I subscribe to that:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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 =&gt; {
        console.log(stats);
      });
    }
  
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>But instead of response, I get bunch of errors in browser console:  </p>
  
  <blockquote>
    <p><a href="https://api.fortnitetracker.com/v1/profile/pc/emulgator_" rel="nofollow noreferrer">https://api.fortnitetracker.com/v1/profile/pc/emulgator_</a> 404 ()  </p>
    
    <p>Failed to load <a href="https://api.fortnitetracker.com/v1/profile/pc/emulgator_" rel="nofollow noreferrer">https://api.fortnitetracker.com/v1/profile/pc/emulgator_</a>: Response for preflight has invalid HTTP status code 404.<br>
    core.js:1350   </p>
    
    <p>ERROR HttpErrorResponse {headers: HttpHeaders, status: 0, statusText: "Unknown Error", url: null, ok: false, …}</p>
  </blockquote>
  
  <p>What I am doing wrong?</p>