從 Angular 11 中的 Spring Boot 響應中獲取標頭

Question

我正在嘗試收集它在 Spring Boot 響應中發送給 Angular 客戶端的標頭，問題是我無法收集這些值。 使用 Postman 我可以看到它們，但是當我使用 Angular 嘗試時，沒有標題的痕跡。 知道發生了什么嗎？ 謝謝！

控制器彈簧啟動：

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

服務角度

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

組件角度

  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 = [];
    }
  }
);

}

登錄 Spring Boot

用帶有標題的郵遞員響應

使用沒有標題的 Angular 響應

Answer 1

你可以嘗試如下。

return this.http.get<HttpResponse<Object>>(this.url, {observe: 
'response'}).pipe(
     tap(resp => console.log('response', resp))
);

Answer 2

您可以像這樣從響應中獲取 HTTP 標頭

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

Answer 3

你必須這樣做：

1- 從后端 Spring-boot 公開標頭鏈接

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

2-您必須在 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 = [];
        }
      }
    );

Answer 4

res.headers 類型是HttpHeaders ，它是一個類，而不是一個對象，所以你不能直接獲取它們的屬性。

正確的方法是：

console.log(res.headers.get('link'))

官方文檔： https : //angular.io/api/common/http/HttpHeaders