2017-08-03 3 views
3

私はAngular 4.3.2と新しいHttpClientを使ってストリームとして送信されたファイルをダウンロードしていますが、ヘッダー(特にContent-Disposition)を取得する必要がありますが、応答にも存在しないようですChromeのデベロッパーツールでリクエストとともにヘッダーが正しく送信されているのがわかります。Angularの新しいHttpClientを使用すると、イベントに登録するときにどのようにすべてのヘッダーを取得できますか?

これはコードです:

とAccess-Control-Allow-Credentials:このコードが呼び出されるとき

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は開発ツールのネットワークタブで、次の応答ヘッダーを報告し、真の
アクセス制御許可元:http://localhost:4200
コンテンツの処理:添付ファイル。 filename = doc5619362.pdf;ファイル名* = UTF-8''doc5619362.pdf
のContent-Length:88379
のContent-Type:アプリケーション/ PDF
日:木、2017年8月3日午前9時43分41秒GMT
サーバー:ケストレル
は変わります:Origin
X-Powered-By:ASP.NET

レスポンスに含まれるすべてのヘッダにどのようにアクセスできますか?存在しないContent-Dispositionだけでなく、他のすべてのヘッダーはContent-Typeを除いてそこにありません。

ありがとうございます! 、問題は角ではありませんhttps://plnkr.co/edit/UXZuhWYKHrqZCZkUapgC?p=preview

+0

'event.headers.get(... ) 'は正しいアプローチです –

+0

マキシムスが推奨するとおりです。 doc:https://angular.io/api/http/Response#headers –

+0

@ManhLeこのリンクは古い 'Http'ドキュメント用で、OPは新しい' HttpClient'を使用しています。そのため、ドキュメントへの正しいリンクは:[DOCS](https://angular.io/api/common/http/HttpHeaders) – cyrix

答えて

5

CORSハンドシェイクである:ここで

UPDATE

は、問題を実証する作業Plunkerあるサーバーが明示的にあなたのコードは、ヘッダーを読み取ることができない場合 ブラウザはそのブラウザからブラウザを非表示にします。サーバーは応答を追加するために、Access-Control-Expose-Headers:<header_name>,<header-name2>を追加する必要がありますが、現在のところ、要求と応答の本文の読み取りは、

+0

答えのおかげで、@パブロ。残念ながら、私の実際のシナリオでは、CORSはうまくいっていて、ファイルはうまくダウンロードできますが、ヘッダはまだありません。 Plunkrではまだヘッダを取得しているはずです。この例ではCORSを許可するファイルを見つけることができませんでした。 – Ceottaki

+0

本当ですか?plunkrのシナリオは有効ではありません。そこにヘッダーが存在しないので、そこに他の問題はありません。 –

+0

CORSを許可する要求にplunkrを更新しました。https:// plnkr .co/edit/UXZuhWYKHrqZCZkUapgC?p = preview – Ceottaki

関連する問題