生成 URL 时允许用户下载文件的正确方法答案

【问题标题】：Right way to allow a user to download a file when its URL is generated生成 URL 时允许用户下载文件的正确方法
【发布时间】：2019-02-08 23:33:49
【问题描述】：

情况：

文件位于 AWS S3
用户按下按钮下载文件
请求被发送到服务器
服务器作为响应发送生成的 URL，授予对文件的访问权限
- URL 当然链接到另一个域（到 S3 存储桶）

目前的解决方案：

现在 JS 处理程序将窗口的位置更改为接收到的 URL。
文件已按原样下载。
但浏览器会抛出如下错误：
- Chrome：“资源解释为文档，但使用 MIME 类型 application/octet-stream 传输”
- Safari：“加载资源失败：帧加载中断”

我无法用简单的<a href="url" download> 替换按钮，因为 URL 是根据用户的请求生成的，并且事先不知道。

我希望它是一种一键式体验（即，我不希望用户点击接收到的 URL 的新按钮）。

问题：

在生成文件的 URL 时允许用户下载文件的正确方法是什么？
是否可以为此更改window.location？

【问题讨论】：

标签： javascript html amazon-s3

【解决方案1】：

更改window.location 下载文件听起来不对..

如果您使用<a> 标签，您可以添加download attribute

 <a href="my.pdf" download="your.pdf" >download file</a>

如果你喜欢使用代码，你可以使用这样的脚本：

 var aTag = document.createElement('a');
 aTag.setAttribute('download','your.pdf');
 aTag.setAttribute('href','my.pdf');
 aTag.click();

【讨论】：

无法解决问题：新标签会闪烁几分之一秒，然后关闭且未启动下载。

【解决方案2】：

正确的方法是让后端在链接下载请求中发送正确的 Content-Type 标头和正确的 MIME 类型的文件。

可以将window.location或document.location.href更改为页面重定向到下载链接。

【讨论】：

【解决方案3】：

这实际上是一个非常简单的问题，根本不需要 Javascript。

当请求被发送到服务器时，只需单击一个链接以发出请求，服务器在验证请求后，生成一个签名的 URL，然后响应......

HTTP/1.1 302 Found
Location: https://example-bucket.s3.amazonaws.com/... # new signed URL

浏览器跟随重定向并获取资源。

【讨论】：

【解决方案4】：

如果您可以对收到的 URL（下载 URL）执行 GET 请求：

只需打开一个新标签页：

window.open(downloadUrl, "_blank");

这样浏览器开始下载文件，然后新标签页会自动关闭。

如果您有义务为 下载 URL 执行 POST 请求：

将隐藏的表单临时注入当前页面，然后提交：

var form = $('<form action="' + downloadUrl + '" method="POST" target="_blank">'
+ '<input name="param1" value="value1" />'
+ '</form>');

form.appendTo(document.body);

$(form).submit();

form.remove();

这里的关键是 target="_blank" 表单的属性。今天，Chrome 会自动关闭新标签页，而 Safari 则不会。但两者都下载文件。

【讨论】：