无法在 Angular4 GET 响应中查看“Content-Disposition”标头

Question

我正在尝试在我的 Angular 应用程序中下载 pdf 文件。服务器 (JBoss) 提供一个文件

Content-type : application/pdf and Content- Disposition

标题设置为附件。我可以在提琴手的响应中很好地看到这些标题。但是，在我的订阅回调中，我看不到相同的标题。相反，标题包含两个属性，即： _headers and _normalizedHeaders

在进行 GET 调用时。我愿意：

`this._http.get(url, {responseType: 'arraybuffer'}).subscribe((file: Response)=>{

    //Cant find headers in file here

});`

我也尝试将 responseType 设置为RequestContentType.Blob，它也没有任何区别。

对于我的下载实现，我有一段代码，它一直适用于我用 AngularJS 下载附件。我只是在这里努力阅读Content-Disposition标题。

我也尝试过设置{ observe : response }，希望以这种方式得到详细的回应。但是，由于某些原因，不允许在 GET 中设置该属性 options。

我在 SO 上看到了很多答案并尝试了其中的大部分，但仍然无法获得标题。

PS：直接在浏览器上点击 API 会得到下载的文件，这意味着我的 Java 代码很好，这让我想知道我上面的代码有什么问题。

请求建议。

Answer 1

对于要在 Angular（或任何其他 Web 应用程序）中访问的服务器发送的任何自定义标头，它必须存在于其中，Access-Control-Expose-Headers否则您的浏览器不会将其传递到您的 Angular 应用程序，并且您将无法检索它，即使您的开发人员工具显示它存在。

Answer 2

在埃文斯的帮助Access-Control-Expose-Headers和setExposedHeaders建议下，我可以实现如下文件下载。

在您的 Java 代码中，您需要公开 Access-Control-Expose-Headers，这可以使用 CORS 作为：

    CorsFilter corsFilter = new CorsFilter();
    corsFilter.setAllowedHeaders("Content-Type, Access-Control-Allow-Headers, Access-Control-Expose-Headers, Content-Disposition, 
    Authorization, X-Requested-With");
    corsFilter.setExposedHeaders("Content-Disposition");

这将在服务器响应中公开所需的标头。

在您的客户端上，您可以使用以下代码处理响应：

    private processDownloadFile() {
              const fileUrl = this._downloadUrl;
              this.http.get(fileUrl, ResponseContentType.ArrayBuffer).subscribe( (data: any) => {
                const blob = new Blob([data._body], { type: data.headers.get('Content-Type')});
                const contentDispositionHeader = data.headers.get('Content-Disposition');
                if (contentDispositionHeader !== null) {
                    const contentDispositionHeaderResult = contentDispositionHeader.split(';')[1].trim().split('=')[1];
                    const contentDispositionFileName = contentDispositionHeaderResult.replace(/"/g, '');
                    const downloadlink = document.createElement('a');
                    downloadlink.href = window.URL.createObjectURL(blob);
                    downloadlink.download = contentDispositionFileName;
                    if (window.navigator.msSaveOrOpenBlob) {
                        window.navigator.msSaveBlob(blob, contentDispositionFileName);
                    } else {
                        downloadlink.click();
                    }
                }
              });
    }   

当然，我把所有东西都写在了一个地方。您可能想要模块化各种回调。

希望有一天它可以帮助某人。