HttpClient Header 无法附加授权

Question

我正在尝试通过将令牌附加到 Http Header 来向 Django Rest API 进行身份验证。我已经将服务器配置为允许 Cross-Origin 资源共享，并且之前能够使用旧版本的 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 returns 出现如下错误： {"detail":"Authentication credentials were not provided."}

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

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

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

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

Answer 1

不出所料，Header 出了点问题。我通过替换旧的 header:

自定义请求 header 解决了这个问题

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

HttpClient Header 无法附加授权

HttpClient Header could not append Authorization

django-rest-auth

ionic3

angular4-httpclient