在React中使用Anchor标签下载文件

Question

我正在尝试使用锚标签来下载我已经存储在我的Prismic.io CMS中的文件。但是，每当我单击该链接时，它都会打开文件，而不是下载它。我不确定我做错了什么，下面是我的代码：

注意: item.download.url会返回托管在aws上的链接：https://wroomdev.s3.amazonaws.com/tutoblanktemplate%2F97109f41-140e-4dc9-a2c8-96fb10f14051_star.gif?auto=compress,format

<a href={`${item.download.url}`}
   download
>
   <FaDownload
     style={{
       fontSize: "32px",
       marginBottom: "10px",
     }}
   />
</a>

Answer 1

我想您不需要react来实现这一点，因为您可以使用HTML5 download属性触发下载。如下所示：

<a href={`${item.download.url}`} download="the_file_name">
    <FaDownload
     style={{
       fontSize: "32px",
       marginBottom: "10px",
     }}
   />
   download
</a>

Answer 2

问题可能是由same-origin策略引起的。

同源策略是一种重要的安全机制，它限制从一个源加载的文档或脚本如何与来自另一个源的资源交互。它有助于隔离潜在的恶意文档，减少可能的攻击载体。

下载由同源控制。

下载仅适用于同源URL或blob:和data:方案

为了解决这个问题，你有两个选择: 1.以某种方式访问相同来源的文件。2.利用Blob。