Angular 2 http Observable请求不返回响应标头答案

【问题标题】：Angular 2 http Observable request not returning response headerAngular 2 http Observable请求不返回响应标头
【发布时间】：2017-01-12 15:18:38
【问题描述】：

我正在使用 Angular 2.2.3 并使用 rxjs 使用 observables 执行 http 请求。标头出现在 Chrome 控制台中，但响应中标头对象上的标头列表为空。这是代码：

登录功能

login(body: Object): Observable<Response> {
    return this.http.post(this.url, body);
}

通过订阅 observable 调用登录函数

this.authService.login(values).subscribe(res => {
    console.log(res.headers.get("Authorization"))
    console.log(res)
},
err => {
    console.log(err);
});

有什么我做错了或者我应该做不同的事情吗？

Chrome 网络控制台响应标头

Console.log 结果

null 的值为 res.headers.get("Authorization") 如您所见，标题列表为空。

非常感谢您的帮助！

【问题讨论】：

这与角度无关。如果数据不在您从服务器获得的 json 响应中，那么，它不存在。
@JoshuaOhana 但正如我提到的，我说过标头出现在 Chrome 网络控制台中，因此标头肯定是响应的一部分。我也在使用 Postman，我收到并可以解析从我的 API 收到的标题。我的 Mocha 测试也是如此。
哦，我很抱歉，由于某种原因，我的大脑一片空白，以为图像丢失了。不确定那么祝你好运
没问题 :-) 但是在这个问题上运气不好。我将通过 Angular 内部来查看解析头的位置。
当你得到答案时一定要回帖，我现在也很好奇

标签： javascript http angular

【解决方案1】：

我找到了解决问题的方法。事实证明，Angular 在幕后使用了XMLHttpRequest。因此，可以“以编程方式”（使用 Angular 的函数）向客户端显示的标头必须位于标头 Access-Control-Expose-Headers 的列表中。当我们将请求发送回客户端时，必须在后端创建此列表。下面是我使用 ExpressJS 来启用 Authorization 标头的操作：

app.use((req, res, next) => {
  // List of headers that are to be exposed to the XHR front-end object
  res.header('Access-Control-Expose-Headers', 'Authorization');
  next();
});

我在前端的初始代码保持不变，现在出现了 Authorization 标头的 console.log。

Documentation explaining why we need this header

整个文档非常有趣，我认为我在 API 方面做得很好，但在阅读本文时我学到了很多 :-)

【讨论】：

我遇到了同样的问题。该文档说The Access-Control-Expose-Headers header lets a server whitelist headers that browsers are allowed to access。为什么 Chrome 网络控制台可以获取那些响应标头？我想知道它是否也使用XMLHttpRequest？