Javascript 如何在ReactJS中下载/保存不同来源的不同扩展名的文件？

我使用ReactJS，需要下载文件。问题是我不能用

     <a href={url} download={filename}></a>

因为URL来自S3 bucket，根据文档，S3 bucket的来源不同-

我试过了，但没用

        import React from 'react';
        import { withStyles } from '@material-ui/core/styles';
        import IconDownload from '@material-ui/icons/CloudDownloadTwoTone';

        const styles = theme => ({
          root: { 
          },
        });

        class AttachmentViewer extends React.PureComponent {
          static propTypes = {
            open: PropTypes.bool.isRequired,
            filename: PropTypes.string.isRequired,
            filePath: PropTypes.string.isRequired,
          };

          render() {
            const { filePath, filename } = this.props;
            return (
              <div>
                <a href={`${filePath}`} download={filename}>
                  <IconDownload />
                </a>
              </div>
            );
          }
        }

        export default withStyles(styles)(AttachmentViewer);

从“React”导入React；
从“@material ui/core/styles”导入{withStyles}”；
从“@material ui/icons/clouddownloadtowtone”导入IconDownload；
常量样式=主题=>({
根：{
},
});
类AttachmentViewer扩展了React.PureComponent{
静态类型={
打开：PropTypes.bool.isRequired，
文件名：PropTypes.string.isRequired，
文件路径：PropTypes.string.isRequired，
};
render（）{
const{filePath，filename}=this.props；
返回(
);
}
}
导出默认样式（样式）（AttachmentViewer）；

上面的代码只是再次打开该文件

作为道具，我正在正确获取文件路径。但它有不同的起源

---

知道如何下载该文件吗？

您是否尝试过设置代理来绕过CORS？绕过CORS的一种常见做法是设置node express后端以提供来自不同来源的数据。这是否回答了您的问题@JakeLuby，不幸的是我不被允许。@Sheepy，看了一下，但我不想直接在DOM中创建元素，因为我们使用的是ReactJS。一定有其他方法不涉及实际的DOM