如何使用 http.get 设置标题答案

【问题标题】：How to set a header with http.get如何使用 http.get 设置标题
【发布时间】：2017-09-30 12:04:19
【问题描述】：

我正在使用 Angular 4.4.4，我需要为 GET 请求设置 Authorization 标头。我研究了文档和代码来弄清楚如何做到这一点。结果是这样的：

const headers = new Headers({ Authorization: this.auth.accessToken});
this.http.get('/api/Messages', { headers } as RequestOptionsArgs)

但是，这不起作用。请求是在没有标头选项的情况下发出的。

但如果我按照以下方式进行操作

const options = { headers: {Authorization: this.auth.accessToken} as any};

return this.http.get('/api/Messages', options as RequestOptionsArgs)

它有效。

但我希望第一次尝试也能奏效。有人可以向我解释我的第一次尝试有什么问题或向我解释正确的方法是什么吗？

【问题讨论】：

我也希望第一次尝试能够奏效。您使用的是@angular/http 还是@angular/common/http？
我正在使用@angular/http。奇怪的是，如果我调试并进入角度代码，我很快就会看到类似这样的内容：this.headers = new Headers(requestOptions.headers); 但requestOptions.headers 已经是Headers 的一个实例。这没有任何意义
在第一个 'headers:' 键丢失。您正在分配没有密钥 {{ Authorization: this.auth.accessToken}} 而不是 {headers:{ Authorization: this.auth.accessToken}}
你的意思是我做{headers}而不是{headers: headers}？但是这两个在es2015/typescript中是一样的
是的，他们是，考虑到你在问这个问题，这就是问题所在。 stackoverflow.com/questions/43612837/… 的可能重复项。症状不同，但问题是一样的。

【解决方案1】：

正如related question 中所解释的，问题在于 Fetch API 与 @angular/http 模块中的类具有相同的类名（它们的设计松散地基于 Fetch API）。

如果未导入 Angular 类（标头、响应等），则使用全局类。这会导致不正确的行为和不相关的错误，因为 Angular 类与 Fetch API 不兼容，但 Http 并非万无一失。

解决方案是始终将相关类与Http 一起导入（即使不使用也可以提前完成）：

import { Http, Response, Headers } from '@angular/http';

避免该问题的一种方法是切换到HttpClient，它在最新的 Angular 4 版本中可用并且具有不同的 API。

【讨论】：