在 React 中使用锚标签下载文件答案

【问题标题】：Using Anchor Tag To Download File In React在 React 中使用锚标签下载文件
【发布时间】：2020-04-27 15:12:34
【问题描述】：

我正在尝试使用锚标记下载我存储在我的 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>

【问题讨论】：

标签： html reactjs prismic.io

【解决方案1】：

我猜你不需要做出反应来实现这一点，因为你可以使用 HTML5 下载属性触发下载。像这样的：

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

【讨论】：

感谢回复，刚刚试了一下，好像还是不行。仍然只是在我的浏览器中打开文件而不是下载它。

【解决方案2】：

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

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

下载由同源控制。

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

要解决这个问题，您有两种选择： 1. 以某种方式通过同源访问文件。 2. 利用 Blob。

【讨论】：