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

Question

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

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

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