在 create-react-app 中无法看到 Content-Disposition header

Question

我有一个 create-react-app 快递服务。 Express 仅作为该应用程序的代理。应用程序逻辑在 CRA 中。

我正在尝试调用 API 并下载文件。 api 返回一个包含文件名的“Content-Disposition” header。我无法在通话中检索 header。

当我在 Postman/chrome-dev-tools 中调用 API 时，我可以看到 header 可用。

请看下面我的代码。文件名代码被注释掉，因为 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();
    });

Answer 1

能够解决这个问题。服务器响应中缺少 header。

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

在响应中添加这个 header 开始暴露丢失的文件名。

在 create-react-app 中无法看到 Content-Disposition header

Unable to see Content-Disposition header in create-react-app

javascript

download

reactjs