使用Angular的新HttpClient，订阅事件时如何获取所有标头? [英] With Angular's new HttpClient, how can I get all headers when subscribing to the events?

问题描述

我正在使用Angular 4.3.2和新的 HttpClient 来下载发送的文件作为流，我需要获取标头(尤其是Content-Disposition)，但是即使我可以在Chrome开发工具中看到标头随请求正确发送，响应中也似乎没有标头.

I am using Angular 4.3.2 and the new HttpClient to download a file sent as a stream, and I need to get the headers (particularly, Content-Disposition), but they don't seem to be present in the response even though I can see the headers being correctly sent with the request in Chrome's dev tools.

这是代码:

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会在开发人员工具的网络"标签中报告以下响应标头:

When this code gets called, Chrome reports in the network tab of dev tools the following response headers:

Access-Control-Allow-Credentials:true
Access-Control-Allow-Origin: http://localhost:4200
内容处置:附件； filename = doc5619362.pdf;文件名* = UTF-8''doc5619362.pdf
内容长度:88379
内容类型:应用程序/pdf
日期:2017年8月3日，星期四09:43:41 GMT
服务器:Kestrel
Vary:Origin
X-Powered-By:ASP.NET

Access-Control-Allow-Credentials:true
Access-Control-Allow-Origin:http://localhost:4200
Content-Disposition:attachment; filename=doc5619362.pdf; filename*=UTF-8''doc5619362.pdf
Content-Length:88379
Content-Type:application/pdf
Date:Thu, 03 Aug 2017 09:43:41 GMT
Server:Kestrel
Vary:Origin
X-Powered-By:ASP.NET

关于如何访问响应中存在的所有标题的任何想法?不仅不存在Content-Disposition，除了Content-Type之外，其他所有标头也不在那里.

Any ideas on how I can access all the headers present in the response? It is not just Content-Disposition that is not present, all of the other headers are not there except for Content-Type.

谢谢！

更新

这是一个正在工作的Plunker，演示了此问题: https://plnkr.co/edit/UXZuhWYKHrqZCZkUapgC ?p =预览

Here is a working Plunker demonstrating the issue: https://plnkr.co/edit/UXZuhWYKHrqZCZkUapgC?p=preview

推荐答案

问题不是Angular，而是CORS握手: 如果服务器未明确允许您的代码读取标头，则浏览器将从标头中隐藏标头.服务器必须在其响应中添加标头Access-Control-Expose-Headers:<header_name>,<header-name2>，以便您读取它们，但是当前它仅允许执行请求并通过添加Access-Control-Allow-Origin

The problem is not Angular, is the CORS handshaking: If the server does not explicitly allow your code to read the headers, the browser will hide them from it. The server must add in its responses the header Access-Control-Expose-Headers:<header_name>,<header-name2> in order to let you to read them, but currently it only allows to do a request and to read the response's body by adding Access-Control-Allow-Origin

这篇关于使用Angular的新HttpClient，订阅事件时如何获取所有标头?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！