Angular4 GET応答で 'Content-Disposition'ヘッダーを表示できません

Question

Angularアプリでpdfファイルをダウンロードしようとしています。サーバ（JBossは）アタッチメントに設定

Content-type : application/pdf and Content- Disposition

ヘッダとファイルを提供しています。 これらのヘッダーは、フィドラーレスポンスでかなりよく見えます。しかし、私の購読のコールバックで私は同じヘッダーを見ることができません。代わりに、ヘッダーには2つのプロパティが含まれています。 _headers and _normalizedHeaders

GET呼び出し中です。私が行います

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

    //Cant find headers in file here 

});` 

はまた、私はRequestContentType.BlobにresponseTypeを設定しようと、それはどちらかの差は行われません。

ダウンロードの実装には、AngularJSを使用して添付ファイルをダウンロードするためのコードがあります。私はContent-Dispositionヘッダーを読むためにここで苦労しています。

また、{ observe : response }を設定しようとしましたが、そのような詳細な応答を期待しています。ただし、GET optionsでは、そのプロパティを設定する理由がいくつかあります。

私はSOの多くの回答を見て、それらのほとんどを試しましたが、まだヘッダーを取得できませんでした。

P.S：ブラウザに直接APIを当てるとダウンロードされたファイルが得られます。これはJavaコードが正常であることを意味し、上記のコードで何が間違っているのだろうかと思います。

提案をリクエストしています。

Answer 1

Evansさんが提案したAccess-Control-Expose-HeadersとsetExposedHeadersの助けを借りて、以下のようにファイルをダウンロードできました。 Javaコードで

、あなたはとしてCORSを使用して行うことができAccess-Control-Expose-Headers、公開する必要があります。これは、サーバーの応答で必要なヘッダを公開します

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(); 
        } 
       } 
       }); 
    } 

勿論、私は1つの場所ですべてを書きました。さまざまなコールバックをモジュール化することができます。

いつか誰かを助けることを願っています。

Answer 2

HIは、あなたは、あなたがあなたが公開必要

public downloadCSVFile(){ 
this.downloadPdf().subscribe(
    (res) => {  
     saveAs(res,'test.pdf') 
    } 
); 
} 

public downloadPdf(): any { 
    let url='your url' 
    let headers = new Headers(); 
    headers.append('Authorization', 'JWT ' + localStorage.getItem('id_token')); 
    return this.http.get(url,{ headers: headers,responseType: ResponseContentType.Blob }).map(
    (res) => { 
     return new Blob([res.blob()], { type: 'application/pdf' }) 
    }) 


    } 

を試すことができ、「NPMファイル・セーバー・--saveをインストールする」のようにインストールし、私たちは、このパッケージのファイル・セーバーを必要とするこの

のように試すことができます角度（または他のWebアプリケーション）にアクセスできるように、サーバーによって送信されたカスタムヘッダーのために裏打ちされたから「のContent処分」のヘッダ（JBossサーバ）

Answer 3

それはそうあなたAccess-Control-Expose-Headersに存在しなければなりませんrブラウザはあなたのAngular Appにそれを渡すことはなく、あなたの開発者ツールがそれを示していてもそれを取得することはできません。