API 응답에서 응답 헤더 읽기 - Angular 5 + TypeScript

API 응답에서 응답 헤더 읽기 - Angular 5 + TypeScript

내가 촉발시키고 있는 것은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
        });
    }
);

의 반응은.API, Chrome inspect에서 체크하면 헤더가 있음을 나타냅니다.

당신은 당신이 그들을X-Token서버측에서 사용access-control-expose-headers? 클라이언트 측에서 모든 헤더에 액세스할 수 있는 것은 아니기 때문에 서버 측에서 헤더를 노출해야 합니다.

또한 프론트엔드에서 새로운 HTTP 모듈을 사용하여 다음을 사용하여 전체 응답을 얻을 수 있습니다.{observe: 'response'}맘에 들다

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

내 경우에는.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

그리고 나의 각진 면에서

Component(구성요소)에서.

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;
  }));

당신은 새것을 사용해야 합니다.HttpClient. 자세한 내용은 여기에서 확인하실 수 있습니다.

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

Hrishikesh Kale이 설명한 것처럼 접근 통제 노출 헤더를 통과해야 합니다.

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>

우리는 속성을 만들고 그 속성으로 메소드를 데코레이션 할 수 있습니다.

해피코딩!!

응답 후 머리글에서 다음과 같은 방법으로 데이터를 가져올 수 있습니다(각도 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'));
})

아래 코드를 사용하여 헤더를 얻을 수 있습니다.

let main_headers = {}
this.http.post(url,
  {email: this.username, password: this.password},
  {'headers' : new HttpHeaders ({'Content-Type' : 'application/json'}), 'responseType': 'text', observe:'response'})
  .subscribe(response => {
    const keys = response.headers.keys();
    let headers = keys.map(key => {
      `${key}: ${response.headers.get(key)}`
        main_headers[key] = response.headers.get(key)
       }
      );
  });

나중에 json 객체에서 필요한 헤더를 얻을 수 있습니다.

header_list['X-Token']

각도 7 서비스:

this.http.post (environment.urlRest + '/my-operation', 본문, {헤더: 헤더, 관찰: 'response'});    

Component:

this.myService.myfunction().subscribe()(res: HttpResponse) => {console.log(res.log.get('x-limit');}  ,오류 =>{})    

이 간단한 코드를 사용해 보세요.

1. Components 사이드 코드: 본문과 헤더 속성을 모두 가져옵니다.여기 몸에 토큰이 있고 그리고Authorization머리말에

loginUser() {
    this.userService.loginTest(this.loginCred).
    subscribe(res => {
        let output1 = res;
        console.log(output1.body.token);
        console.log(output1.headers.get('Authorization'));
    })
}

2. 서비스 사이드 코드: 로그인 데이터를 차체에 전송하고 의 응답을 관찰합니다.Observable구성 요소 측면에 가입되어 있는 모든 것.

loginTest(loginCred: LoginParams): Observable<any> {
    const header1= {'Content-Type':'application/json',};
    const body =  JSON.stringify(loginCred);
    return this.http.post<any>(this.baseURL+'signin',body,{
        headers: header1,
        observe: 'response',
        responseType: 'json'
    });
}

ASP에서 헤더를 가져올 때 SPA Angular application에 헤더가 나타나도록 하기 위해서는 다음과 같은 작업을 해야 했습니다.NET Core 서비스:

var builder = WebApplication.CreateBuilder(args);

services.AddCors(options =>
{
    options.AddPolicy("MyExposeResponseHeadersPolicy",
        builder =>
        {
            builder.WithOrigins("https://*.example.com")
                   .WithExposedHeaders("x-custom-header");
        });
});

builder.Services.AddControllers();

var app = builder.Build();

언급URL : https://stackoverflow.com/questions/48184107/read-response-headers-from-api-response-angular-5-typescript