HttpClient 标头无法附加授权答案

【问题标题】：HttpClient Header could not append AuthorizationHttpClient 标头无法附加授权
【发布时间】：2018-02-25 13:45:45
【问题描述】：

我正在尝试通过将令牌附加到 Http 标头来对 Django Rest API 进行身份验证。我已经将服务器配置为允许跨域资源共享，并且之前能够使用旧版本的 HTTP 进行身份验证。在我升级到最新的 Ionic CLI (Ionic 3) 并开始使用 HttpClient 模块后，问题就开始了。

这是我的一段代码：

// get token data from storage
this.storage.get('auth').then((val) => {
this.headers = new Headers();
this.headers.append('Content-Type','application/x-www-form-urlencoded');
this.headers.append('Authorization', val);
console.log(this.headers.get('Authorization')) //displays: Token randomKey1244556etc 


//request
 this.http.get<any>("http://192.168.22.5/api-get-user", {headers: this.headers})
        .subscribe(data => {
            console.log(data);
        }, (err) => {
          console.log(err);
        });
    }, (err) => {
      this.flag = false;
    })

API 返回以下错误： {"detail":"未提供身份验证凭据。"}

这里是发送的网络请求和服务器响应的详细信息：

但是，当使用 PostMan 使用附加到 HttpClient 标头的相同凭据时，身份验证成功。

似乎标头未随请求一起发送，或者授权未附加到标头。知道如何解决这个问题吗？

注意：我也在使用 CORS Google Chrome 扩展程序。

【问题讨论】：

标签： ionic3 django-rest-auth angular4-httpclient

【解决方案1】：

正如预期的那样，标题有问题。我已经通过替换旧标头来自定义请求标头解决了这个问题：

this.headers = new Headers();
this.headers.append('Content-Type','application/x-www-form-urlencoded');
this.headers.append('Authorization', val);

到：

const headers = new HttpHeaders().set('Authorization', val);

参考：Customizing Http Request Header

【讨论】：

标题没有问题...新的HttpHeader 类的实例是不可变 对象。调用类方法将返回一个新实例作为结果。