从 API 响应读取响应标头 - Angular 5 TypeScript

Question

我正在触发 HTTP 请求，我得到了有效的响应。响应还有一个我希望阅读的标题 X-Token 。我正在尝试下面的代码来读取标题，但是，结果我得到了 null

 this.currentlyExecuting.request = this.http.request(reqParams.type, reqParams.url, {
    body: reqParams.body,
    responseType: 'json',
    observe: 'response'
}).subscribe(
    (_response: any) => {
        // Also tried _response.headers.init();
        const header = _response.headers.get('X-Token');
        console.log(header);
        onComplete(_response.body);
     },
    _error => {
        onComplete({
            code: -1,
            message: Constants.WEBSERVICE_INTERNET_NOT_CONNNECTED
        });
    }
);

在 Chrome 检查中检查时 API 的响应显示标头存在。

原文由 Sahil Khanna 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您是否使用 X-Token access-control-expose-headers ？因为并非所有标头都允许从客户端访问，您需要从服务器端公开它们

同样在您的前端，您可以使用新的 HTTP 模块来获得完整的响应，使用 {observe: 'response'} 就像

http
  .get<any>('url', {observe: 'response'})
  .subscribe(resp => {
    console.log(resp.headers.get('X-Token'));
  });

原文由 Hrishikesh Kale 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

试试这个简单的代码。

1.组件端代码： 获取body和header属性。这里在正文中有一个标记，在标题中有一个 Authorization 。

 loginUser() {
    this.userService.loginTest(this.loginCred).
    subscribe(res => {
        let output1 = res;
        console.log(output1.body.token);
        console.log(output1.headers.get('Authorization'));
    })
}

2、服务端代码： 在body中发送登录数据，观察组件端订阅的 Observable 中的响应。

 loginTest(loginCred: LoginParams): Observable<any> {
    const header1= {'Content-Type':'application/json',};
    const body =  JSON.stringify(loginCred);
    return this.http.post<any>(this.baseURL+'signin',body,{
        headers: header1,
        observe: 'response',
        responseType: 'json'
    });
}

原文由 A.K.J.94 发布，翻译遵循 CC BY-SA 4.0 许可协议