Angular 2：获取授权标头答案

【问题标题】：Angular 2: Get Authorization headerAngular 2：获取授权标头
【发布时间】：2017-07-07 22:22:40
【问题描述】：

在我的应用程序（Angular 2 / Ionic 2）中，我实现了自己的登录/身份验证。基本上它是这样工作的：登录时，PHP 后端正在验证用户名和密码。生成一个令牌，该令牌在标头中发送回前端（授权）。后端的响应如下所示：

HTTP/1.1 200 OK
Host: localhost:8080
Connection: close
X-Powered-By: PHP/5.6.28
Set-Cookie: PHPSESSID=jagagi2le1b8i7r90esr4vmeo6; path=/
Expires: Thu, 19 Nov 1981 08:52:00 GMT
Cache-Control: no-store, no-cache, must-revalidate, post-check=0, pre-check=0
Pragma: no-cache
Content-Type: application/json
 Authorization: d7b24a1643a61706975213306446aa4e4157d167eaad9aac989067a329c492d3
Access-Control-Allow-Origin: *
Access-Control-Allow-Headers: X-Requested-With, Content-Type, Accept, Origin, Authorization
Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS
Content-Length: 301

显然有一个带有令牌的 Authorization 标头。 CORS 似乎也设置正确，因为我在 Allow-Headers 标题中看到了授权。

但是，当我尝试在 Angular 2 中获取标头时，它总是返回 null：

private extractDataAndSetAuthHeader(res: Response) {

    // Set auth header if available.
    // If not available - user is not logged in. Then 
    // we also have to remove the token from localStorage
    if(res.headers.has("Authorization"))
    {
        let token = res.headers.get("Authorization");

        this.setToken(token);
    }
    else
    {
        // If no token is sent, remove it
        this.removeToken();
    }

    let body = res.json();
    return body.data || { };
}

方法的第一行返回 false。此外，当我检查响应中的 headers 对象时，它只显示以下内容（Chrome 开发工具）：

[[Entries]]:
Array[4]
0:{"pragma" => Array[1]}
1:{"content-type" => Array[1]}
2:{"cache-control" => Array[1]}
3:{"expires" => Array[1]}

该对象中不存在授权标头。

谁能帮帮我？

提前致谢:)

【问题讨论】：

Authorization 通常用作请求标头，而不是响应。为什么不在响应正文中返回访问令牌？
因为据我所知，这就是 Authorization 标头的用途。在每个请求中（当用户登录时），我都会在请求中发送一个 Authorization 标头，检查令牌是否仍然有效，然后，为了更安全，重新生成令牌，并使用 @ 将其发送回前端987654327@ 标头。我错过了什么吗？
stackoverflow.com/q/42306684/2587435
这对我来说似乎不是一个好策略。如果客户端并行发送多个请求怎么办？如果对第二个请求的响应先于对第一个请求的响应怎么办？在每次请求时更改令牌有什么意义：如果您关心安全性，无论如何它都应该受到 TLS 的保护。
@peeskillet 您的提示就是解决方案，非常感谢！

标签： angular authentication ionic2

【解决方案1】：

只是想发布答案，因为它可能对其他人有所帮助：设置解决方案

Access-Control-Expose-Headers: Authorization

那么 - 前端也可以读取 Authorization 标头。

【讨论】：

你在哪里添加的？
你必须在你的后端添加这个。
谢谢你，你拯救了我的一天！

【解决方案2】：

这个答案帮助了我：link

它展示了如何在后端添加它以及如何在前端使用它

Java 后端：

public void methodJava(HttpServletResponse response){
...
response.addHeader("access-control-expose-headers", "Authorization");
}

并像这样访问 Angular 上的标题：

return this.http
    .get(<your url here for your backend>)
    .map(res => console.log("cookie: " + res.headers.get("Authorization") )
}

【讨论】：

欢迎提供解决方案链接，但请确保您的答案在没有它的情况下有用：add context around the link 这样您的其他用户就会知道它是什么以及为什么会出现，然后引用最相关的您链接到的页面的一部分，以防目标页面不可用。 Answers that are little more than a link may be deleted.

【解决方案3】：

这与 Angular 无关。问题是 CORS 默认限制标头，并且在调用 CORS 请求时看不到“授权”标头。所以，调整服务器让它发送授权头

必须提供 Access-Control-Allow-Headers 以响应 OPTIONS 请求（飞行前）。

必须提供 Access-Control-Expose-Headers 以响应 POST/GET 请求。

Access-Control-Expose-Headers：授权

【讨论】：