使用 Angular 的新 HttpClient，订阅事件时如何获取所有标头？

Question

我正在使用 Angular 4.3.2 和新的 HttpClient 下载作为流发送的文件，我需要获取标题（特别是 Content-Disposition），但它们似乎不存在即使我可以在 Chrome 的开发工具中看到与请求一起正确发送的标头，也会得到响应。

这是代码：

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 会在开发工具的网络选项卡中报告以下响应标头：

访问控制允许凭据：true
访问控制允许来源：http://localhost:4200
内容处置：附件；文件名=doc5619362.pdf；文件名*=UTF-8''doc5619362.pdf
内容长度：88379
内容类型：应用程序/pdf
日期：格林威治标准时间 2017 年 8 月 3 日星期四 09:43:41
服务器：Kestrel
不同：产地
X-Powered-By:ASP.NET

关于如何访问响应中存在的所有标头有什么想法吗？不只是 Content-Disposition 不存在，除了 Content-Type 之外，所有其他标头都不存在。

谢谢！

更新

这是一个正在运行的 Plunker 演示该问题：https://plnkr.co/edit/UXZuhWYKHrqZCZkUapgC?p=preview

Answer 1

问题不在于 Angular，而在于 CORS 握手： 如果服务器没有明确允许您的代码读取标头，则浏览器会将它们隐藏起来。服务器必须在其响应中添加标头 Access-Control-Expose-Headers:<header_name>,<header-name2> 以便您阅读它们，但目前它只允许通过添加 Access-Control-Allow-Origin 来执行请求并读取响应的正文