[解決済み] create-react-appのcontent-dispositionヘッダが表示されない [重複].

質問

create-react-appで、expressから提供されています。Expressは、アプリのプロキシとしてのみ機能します。アプリケーションのロジックはCRAにあります。

あるAPIを呼び出して、ファイルをダウンロードしようとしています。APIは、ファイル名を含む"Content-Disposition"ヘッダーで応答を返します。私は私の呼び出しでヘッダーを取得することができません。

Postman/chrome-dev-toolsでAPIを呼び出すと、ヘッダが利用可能であることがわかります。

以下の私のコードをご覧ください。ファイル名のコードはコメントアウトされています。 res.headers は空です。

let filename = 'test-file-name'; // <--- default file name
const output = fetch(transactionReportPath(), {
    headers: {
      accept: 'text/csv',
      Authorization: `Bearer ${getToken()}`
    }
  })
    .then((res) => {
        console.log(res.headers) // <---- empty object
        // filename = res.headers.get('Content-Disposition').split(";")[1]
        return res.blob()})
    .then((blob) => {
      const file = window.URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = file;
      a.download = filename;
      document.body.appendChild(a); 
      a.click();
      a.remove();
    });

解決方法は？

この問題を解決することができました。サーバーのレスポンスに欠けているヘッダーがありました。

response["Access-Control-Expose-Headers"] = "Content-Disposition"

レスポンスにこのヘッダを追加すると、欠落していたファイル名が公開されるようになりました。