从API响应中读取响应头 - Angular 5 + TypeScript

Question

我正在触发HTTP请求,我从中得到了有效的回复.响应还有一个我希望阅读的标题X-Token.我正在尝试下面的代码来读取标题,但是,我得到null作为结果

this.currentlyExecuting.request = this.http.request(reqParams.type, reqParams.url, {
    body: reqParams.body,
    responseType: 'json',
    observe: 'response'
}).subscribe(
    (_response: any) => {
        // Also tried _response.headers.init();
        const header = _response.headers.get('X-Token');
        console.log(header);
        onComplete(_response.body);
     },
    _error => {
        onComplete({
            code: -1,
            message: Constants.WEBSERVICE_INTERNET_NOT_CONNNECTED
        });
    }
);

X-Token在Chrome检查中检查时,响应显示标题存在.尝试在StackOverflow上查看几个相关问题,但没有任何帮助.

Answer 1

你从服务器端公开x-token？使用"access-control-expose-headers".因为不允许从客户端访问所有标头,所以需要从服务器端公开它们

同样在你的前端,你可以使用新的HTTP模块来获得完整的响应{ X-Token喜欢

http
  .get<any>('url', {observe: 'response'})
  .subscribe(resp => {
    console.log(resp.headers.get('X-Token'));
  });

Answer 2

你应该使用新的HttpClient.您可以在此处找到更多信息.

http
  .get<any>('url', {observe: 'response'})
  .subscribe(resp => {
    console.log(resp.headers.get('X-Token'));
  });

Answer 3

正如Hrishikesh Kale所解释的，我们需要传递Access-Control-Expose-Headers。

这里是我们如何在WebAPI / MVC环境中做到这一点：

protected void Application_BeginRequest()
        {
            if (HttpContext.Current.Request.HttpMethod == "OPTIONS")
            {
                //These headers are handling the "pre-flight" OPTIONS call sent by the browser
                HttpContext.Current.Response.AddHeader("Access-Control-Allow-Methods", "GET, POST, OPTIONS");
                HttpContext.Current.Response.AddHeader("Access-Control-Allow-Headers", "*");
                HttpContext.Current.Response.AddHeader("Access-Control-Allow-Credentials", "true");
                HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "http://localhost:4200");
                HttpContext.Current.Response.AddHeader("Access-Control-Expose-Headers", "TestHeaderToExpose");
                HttpContext.Current.Response.End();
            }
        }

另一种方法是，我们可以在webApiconfig.cs文件中添加以下代码。

config.EnableCors(new EnableCorsAttribute("", headers: "", methods: "*",exposedHeaders: "TestHeaderToExpose") { SupportsCredentials = true });

**我们可以在web.config文件中添加自定义标头，如下所示。*

<httpProtocol>
   <customHeaders>
      <add name="Access-Control-Expose-Headers" value="TestHeaderToExpose" />
   </customHeaders>
</httpProtocol>

我们可以创建一个属性，并用该属性修饰该方法。

快乐编码！

Answer 4

就我的情况而言，POST我想拥有，authorization header因为我已经拥有了JWT Token。所以我从这篇文章中读到的是我想要的标题，应该Expose Header从后端添加为。因此，我所做的就是将Authorization标头添加到我的“ 暴露标头”中，就像这样filter class。

response.addHeader("Access-Control-Expose-Headers", "Authorization");
response.addHeader("Access-Control-Allow-Headers", "Authorization, X-PINGOTHER, Origin, X-Requested-With, Content-Type, Accept, X-Custom-header");
response.addHeader(HEADER_STRING, TOKEN_PREFIX + token); // HEADER_STRING == Authorization

在我的角度

在组件中。

this.authenticationService.login(this.f.email.value, this.f.password.value)
  .pipe(first())
  .subscribe(
    (data: HttpResponse<any>) => {
      console.log(data.headers.get('authorization'));
    },
    error => {
      this.loading = false;
    });

在我的服务端。

return this.http.post<any>(Constants.BASE_URL + 'login', {username: username, password: password},
  {observe: 'response' as 'body'})
  .pipe(map(user => {
       return user;
  }));

Answer 5

您可以通过这种方式（Angular 6）从后响应标题中获取数据：

import { HttpClient, HttpHeaders, HttpResponse } from '@angular/common/http';

const httpOptions = {
  headers: new HttpHeaders({ 'Content-Type': 'application/json' }),
  observe: 'response' as 'response'
};

this.http.post(link,body,httpOptions).subscribe((res: HttpResponse<any>) => {
  console.log(res.headers.get('token-key-name'));
})