如何在 Angular 5 中获取“授权”标头

Posted 2023-03-10

【中文标题】如何在 Angular 5 中获取“授权”标头

【英文标题】：How to get 'Authorization' Header in Angular 5

【发布时间】：2018-06-22 06:05:16

【问题描述】：

我有启用 Spring-Boot JWT 的 REST API。身份验证 API /login 确实按预期提供了所有 CORS 和 AUTH 标头。通过 Curl 和 Postman 测试。 我的客户端代码在 Angular 5 中。成功通过身份验证后，我可以看到 -

所有必需的标头，特别是网络流量中 Chrome 开发者工具中的“授权”标头。 但是，当使用 Angular 5 HttpClient 访问时，组件/服务中无法访问 Header。

注意：后端、CORS 和允许标头已启用，因此 Chrome 网络流量正常。

在 POST 调用期间在 HttpClient 中添加了所需的选项。

     responseType: 'text',
     observe: 'response'

在那里尝试了所有可能的 responseType。 默认情况下，JSON 会引发解析异常。 这意味着默认的 Spring-Boot JWTS /login API 不返回 JSON 输出，而只返回 HttpResponse。

请帮忙...

Angular 代码 -

login(payload: any): Observable < any > 

    return this._http.post(this.loginEndPoint, payload, 
        responseType: 'text',
        observe: 'response'
    )
        /* .map((response: HttpResponse<string>) => 
            console.log(response.headers.get('Authorization'));
            return response;
        ); */
        .pipe(
        tap(response => 
            console.log(response.headers.get('Authorization'));
            return response;
        ),
        catchError(this.handleError('getHeroes', []))
        );

【问题讨论】：

你好，我来晚了。更令人困惑的是，我能够在 Postman 和 Chrome 开发者控制台中获得标题，但在 Angular 中却没有。最初我认为这是因为 Angular 内部使用了 Angular OR Observable OR XMLHttpRequest。事情很简单，只需添加 res.setHeader("Access-Control-Expose-Headers", "Authorization");我也在尝试以下不起作用 res.setHeader("Access-Control-Allow-Headers", "Authorization, Content-Type, Accept, x-requested-with, Cache-Control");谢谢，我希望它会帮助别人。

【参考方案1】：

tap 运算符不会在可观察流中发出值。所以返回其中的东西不会做任何事情。它用于执行诸如日志记录之类的副作用。要发出值，请使用 map 运算符

.pipe(
    map(response => 
       return response.headers.get('Authorization');
   )
)

注意：这只会将标头返回给订阅的组件。

【讨论】：

感谢@LLai，我实际上尝试在没有管道的情况下独立使用 Map。这里也不工作。我不需要完整的回应。只有我需要存储的标题是必需的。因此，我可以返回特定的 Header 或完整的 Response..

@Prafulla 也许这个SO 的回答会有所帮助。

【参考方案2】：

您应该在后端添加一行： response.addHeader("access-control-expose-headers", "Authorization");

【讨论】：

虽然此代码可能会为 OP 的问题提供解决方案，但强烈建议您提供有关此代码为何和/或如何回答问题的额外上下文。从长远来看，只有代码的答案通常会变得毫无用处，因为未来遇到类似问题的观众无法理解解决方案背后的原因。