I've a create-react-app with which is served from express. Express is serving only as a proxy for the app. The application logic is in CRA.

I'm trying to call an API and to download a file. The api responds back with a "Content-Disposition" header which contains the file name. I'm unable to retrieve the header in my call.

When I call the API in Postman/chrome-dev-tools, I can see the header available.

Please see my code below. The filename code is commented out because res.headers is empty.

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