javascript - 在异步操作中在新窗口中打开签名的 S3 URL 时出错

Question

我在 react 组件中有一个按钮。单击按钮后，我会进行 API 调用来获取要下载的资源的签名 S3 URL。下面是相关代码

// inside render method
<Button onClick={() => getS3DownloadUrl('sample.zip')}>
    Download Sample
</Button>

// component method
getS3DownloadUrl(fileName) {
    let newWindow = window.open();
    axios.get("www.myapp.com/downloads/" + fileName).then(response => {
        newWindow.location = response.data;
    }).catch(error => {
        // handle error
    });
}

上述代码有效，Firefox 在新选项卡中显示下载弹出窗口以接受/取消下载。在随后的单击中，我在新选项卡上收到错误(附有屏幕截图)。但是，当我刷新选项卡时，我再次弹出下载窗口，这意味着 URL 是正确的，但我无法首先找出错误的原因。如有任何帮助，我们将不胜感激。

Answer 1

我以前也遇到过这个问题；试试 javilobo8 的这个片段

axios({
  url: "www.myapp.com/downloads/" + fileName,
  method: 'GET',
  responseType: 'blob', // important
}).then((response) => {
  const url = window.URL.createObjectURL(new Blob([response.data]));
  const link = document.createElement('a');
  link.href = url;
  link.setAttribute('download', 'file.pdf');
  document.body.appendChild(link);
  link.click();
});