Góc 2: Không thể truy cập tiêu đề phản hồi trong yêu cầu http

Question

Tôi đang sử dụng mô-đun angular2-http (alpha.44) để truy xuất dữ liệu từ REST Api. Tôi không thể tìm ra cách truy cập thông tin có trong bản đồ tiêu đề của phản hồi, từ đó tôi cần một trường cụ thể. Ví dụ:

var req = new Request({ 
    url: `localhost/api/products`, 
    method: RequestMethods.Get 
}); 

this.http.request(req).subscribe(
    res => { 
    // Can't access the headers of the response here.... res.headers is empty 
    }, 
    error => { ... }, 
    _ => {} 
); 

Lạ lùng thay, nếu tôi kiểm tra lưu lượng mạng trong các công cụ dev của trình duyệt, các tiêu đề phản ứng có mặt ...

Answer 1

Có đã na vấn đề về problema mà mở trên github: https://github.com/angular/angular/issues/5237#issuecomment-156059284

Bạn nên kiểm tra xem có ai đó đã đăng giải pháp hay không.

CẬP NHẬT

Đội góc đã giải quyết vấn đề này.

Answer 2

Giải pháp là trong các vấn đề đã được liên kết nhưng trong một chú thích sau: https://github.com/angular/angular/issues/5237#issuecomment-239174349

Trừ một số tiêu đề chung chung chỉ các tiêu đề được liệt kê như một giá trị của Access-Control-Expose-Headers tiêu đề sẽ được ánh xạ trong Angular2 (có thể với những người khác quá). Điều này đã được thêm vào phía phụ trợ.

Đối với tôi, phải mất hơn một giờ để tìm ra điều này cho tiêu đề Authorization. Tôi nghĩ rằng nó không phải là tiêu đề tùy chỉnh nhưng nó được.

Trong PHP một cái gì đó gọi như thế này: header("Access-Control-Expose-Headers: Authorization, X-Custom-header");

Nếu bạn sử dụng Laravel như backend với barryvdh/laravel-cors làm thiết lập này trong file config/cors.php.

Answer 3

Tôi thấy liên kết này hữu ích: https://developer.mozilla.org/es/docs/Web/HTTP/Headers/Access-Control-Expose-Headers

Trong trường hợp như tôi phải xác định những tiêu đề cần thiết tôi phải tiếp xúc với người sử dụng cuối cùng từ máy chủ của tôi bản thân bằng cách thêm những gì tiêu đề (s) thực sự là!

// Request headers you wish to expose 
res.setHeader('Access-Control-Expose-Headers', 'your_desired_header, content-type'); 

Chúc mừng!