Angular / Ionic在标头中传递API密钥

Question

我正在尝试在Ionic3中编写简单的移动应用程序，它将为用户显示fornite / pubg统计信息。我知道有多个具有相同功能的应用程序，但我这样做只是为了获得挂起的离子。

API提供商的页面只有一个要求：

要使用我们的API，我们要求您使用API​​密钥。要使用API​​密钥，您需要将其作为请求的标头传递。 TRN-Api-Key：xxx-xxx-xxx

所以，我写道：

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

之后，我订阅了：

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

}

但是，我没有回应，而是在浏览器控制台中收到大量错误：

https://api.fortnitetracker.com/v1/profile/pc/emulgator_ 404（）

无法加载https://api.fortnitetracker.com/v1/profile/pc/emulgator_：预检的响应具有无效的HTTP状态代码404。 core.js：1350

错误HttpErrorResponse {headers：HttpHeaders，status：0，statusText：“Unknown Error”，url：null，ok：false，...}

我做错了什么？

Answer 1

HttpHeaders是不可变的

所以你需要使用

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

要么

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

此外，如果您使用的是新的HttpClient，则无需使用map运算符。你可以直接回来

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