Angular 2：获取授权标头

Posted 2023-03-10

【中文标题】Angular 2：获取授权标头

【英文标题】：Angular 2: Get Authorization header

【发布时间】：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@ 标头。我错过了什么吗？

***.com/q/42306684/2587435

这对我来说似乎不是一个好策略。如果客户端并行发送多个请求怎么办？如果对第二个请求的响应先于对第一个请求的响应怎么办？在每次请求时更改令牌有什么意义：如果您关心安全性，无论如何它都应该受到 TLS 的保护。

@peeskillet 您的提示就是解决方案，非常感谢！

【参考方案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：授权