如何在角度 2 中获取自定义响应标头？

Question

我是 Angular 2 的新手，目前正在使用 Angular 2.2.1，我可以成功地发布请求并获得成功响应，但是当我尝试从响应中获取 Authorization 标头时，我总是得到null 我是否能够获得 Content-Type 标头。以下是我目前的解决方案。

service.ts 登录方式：

login(model: LoginModel) {
        let requestUrl = '/someurl';
        let requestPayload = JSON.stringify(model);
        let headers = this.getHeaders(false); // ... Set all required headers       

        let options = new RequestOptions({ headers: headers }); // Create a request option

        return this.http.post(requestUrl, requestPayload, options) // ...using post request
            //.map((res: Response)) // ...and calling .json() on the response to return data
            .subscribe((res: Response) => {
                var payload = res.json();
                var authorization = res.headers.get('Authorization');
                var contentType = res.headers.get('Content-Type');                                
                console.log(payload, contentType, authorization)
            });            
    }

标题助手

getHeaders(isSecureAPI: boolean) {
        let headers = new Headers({ 'Content-Type': 'application/json', 'Accept': 'application/json' });
        if (isSecureAPI) {
            headers.append('Authorization', 'GetFromSession');
            headers.append('X-UserID', 'GetFromSession');
        }
        return headers;
    }

提琴手曲目：

角度控制台输出

所以任何人都可以指导我我可能做错了什么？

Answer 1

我一直在努力寻找解决方案，结果遇到了this

假设我正在使用Microsoft Cors WebAPI 2 Nuget package，并且我的 WebApiConfig.cs 中有以下全局配置：

...
var corsAttr = new EnableCorsAttribute("http://localhost:4200", "*", "*");
config.EnableCors(corsAttr);
...

EnableCorsAttribute 构造函数接受第 4 个字符串参数以全局允许任何附加标头：

var corsAttr = new EnableCorsAttribute("http://localhost:4200", "*", "*", "X-Foo, X-Bar, X-Baz");

Answer 2

Header 被允许但未在 CORS 服务器上公开，但是在服务器上添加 headers.add("Access-Control-Expose-Headers", "Authorization, X-Custom"); 完成了这项工作： )