使用Angular的新HttpClient，訂閱事件時如何獲取所有頭文件？

我正在使用Angular 4.3.2和新的HttpClient下載一個作爲流發送的文件，並且我需要獲取標題（特別是Content-Disposition），但它們似乎並沒有出現在響應中儘管我可以在Chrome的開發工具中看到標題正確地與請求一起發送。使用Angular的新HttpClient，訂閱事件時如何獲取所有頭文件？

這是代碼：

downloadDocument(documentId: number) { 
    const downloadDocumentUrl = `${ this.config.apiUrls.documents }/${ documentId }`; 
    const downloadRequest = new HttpRequest('GET', downloadDocumentUrl, { 
     reportProgress: true, 
     responseType: 'blob' 
    }); 

    let percentageDownloaded = 0; 
    this.http.request(downloadRequest).subscribe(
     (event: HttpEvent <any>) => { 
      if (event) { 
       switch (event.type) { 
        case HttpEventType.ResponseHeader: 
         const contentDispositionHeader = event.headers.get('Content-Disposition'); 
         console.log(contentDispositionHeader); // Always null here although I expected it to be there. 
         break; 

        case HttpEventType.DownloadProgress: 
         if (event.total) { 
          percentageDownloaded = Math.round((event.loaded/event.total) * 100); 
         } 
         break; 

        case HttpEventType.Response: 
         const downloadedFile: Blob = event.body; 
         fileSaverSaveAs(downloadedFile, `${ documentId }.pdf`, true); // This is where I'd like to use content-disposition to use the actual file name. 
         break; 
       } 
      } 
     , 
     (err) => {} 
    ); 
}

當這段代碼被調用時，Chrome在開發工具下的響應首部網絡標籤報道：

訪問控制允許的憑據：真
Access-Control-Allow-Origin：http://localhost:4200
Content-Disposition：attachment;文件名= doc5619362.pdf;文件名* = UTF-8''doc5619362.pdf
的Content-Length：88379
內容類型：應用程序/ PDF
日期：星期四，2017年8月3日9時43分41秒GMT
服務器：紅隼
因人而異：Origin
X-Powered-By：ASP.NET

關於如何訪問響應中的所有頭文件的任何想法？這不僅僅是Content-Disposition不存在，除Content-Type之外的所有其他標題都不存在。

謝謝！

UPDATE

這裏是一個工作Plunker演示該問題：https://plnkr.co/edit/UXZuhWYKHrqZCZkUapgC?p=preview

來源

2017-08-03 Ceottaki

'event.headers.get（...）來讀取響應的正文。）'是正確的方法 –

正如Maximus建議的那樣; doc：https：//angular.io/api/http/Response#headers –

@ManhLe這個鏈接是用於舊的'Http'文檔，OP使用新的'HttpClient'，因此與文檔的正確鏈接是：[DOCS]（https://angular.io/api/common/http/HttpHeaders） – cyrix

的問題是沒有棱角，是CORS握手：如果服務器沒有明確允許你的代碼讀取頭，瀏覽器會將它們隱藏起來。服務器必須在其響應中添加標頭Access-Control-Expose-Headers:<header_name>,<header-name2>以便讓您閱讀它們，但是目前它只允許請求並通過添加Access-Control-Allow-Origin

來源

2017-08-03 11:02:35

感謝您的回答，@Pablo。不幸的是，在我真實的情況下，CORS被允許很好，文件下載很好，但仍然沒有標題。儘管如此，我仍然應該獲得頭銜。我無法找到一個文件來指出這將允許CORS的例子。 – Ceottaki

你確定嗎？我的意思是，那麼plunkr的情況是不是有效的，那頭不存在，所以任何其他問題不能在那裏再現 –

我已經更新了PLUNK的請求，允許CORS：https：// plnkr .CO /編輯/ UXZuhWYKHrqZCZkUapgC？p = preview – Ceottaki

使用Angular的新HttpClient，訂閱事件時如何獲取所有頭文件？

回答

相關問題