[FIXED] Get headers from Spring Boot response in Angular 11

Issue

I am trying to collect the headers that it sends in the Spring Boot response to an Angular client, the problem is that I cannot collect the values. With Postman I can see them, but when I try it with Angular there is no trace of the headers. Any idea what is happening? Thank you!

Controller Spring Boot:

@GetMapping("/page")
public ResponseEntity<?> getAllPageable(@PageableDefault(size = 10, page = 0) Pageable pageable, HttpServletRequest request) {
    Page<TodoEntity> result = todoService.findAll(pageable);
    if (result.isEmpty()) {
        throw new TodoNotFoundException();
    } else {
        UriComponentsBuilder uriBuilder =
                UriComponentsBuilder.fromHttpUrl(request.getRequestURL().toString());
        return ResponseEntity.ok().header("link", paginationLinksUtils.createLinkHeader(result, uriBuilder)).body(result);
    }
}

Service Angular

  getTodosPagination(page:number, size:number): Observable<HttpResponse<any>> {
const url = `${this.base_url}/todos/page/?page=${page}&size=${size}`;
return this.httpClient.get<any>(url,{
  headers: new HttpHeaders(),
  observe: 'response' });

Component Angular

  private getTodosPagination(page:number, size:number) {
this.todoService.getTodosPagination(page, size).pipe(takeUntil(this.destroy$)).subscribe(
  (res:any)=> {
    console.log(res.headers)
  },
  (error) => {
    if (error["status"] == 404){
      this.todoCustom = [];
    }
  }
);

}

Log in Spring Boot

Response with Postman with headers

Response with Angular without headers

Solution

you must do :

1- Expose the headers link from your backend Spring-boot

Access-Control-Expose-Headers in your backend to expose the link header

2- you must do in your Angular :

private getTodosPagination(page:number, size:number) {
    this.todoService.getTodosPagination(page, size).pipe(takeUntil(this.destroy$)).subscribe(
      (res:any)=> {
        res.headers.get("link")
      },
      (error) => {
        if (error["status"] == 404){
          this.todoCustom = [];
        }
      }
    );

Answered By - Andre Kouame