cross-browser 从经过身份验证的端点下载大文件的解决方案

Question

我正在寻找一种在不记名令牌保护 api 端点上下载大文件（如 2 - 4 Gb）的方法，该方法适用于所有常见浏览器（IE 11、Chrome 、Firefox、Android 浏览器、Safari）。它应该仅适用于 angular/ts 和浏览器（不提供应用程序）。

FileSaver 的问题

目前我正在使用 eligrey/filesaver，它结合了客户端 blob 下载的所有浏览器特定可能性。通过这种方法，我可以轻松地使用不记名令牌（例如使用 http 拦截器）。

问题是，IE 增加 RAM 并卡在 1.4 GB 下载。

StreamSaver 的问题

我看到 StreamSaver.js 有一种新的现代方式，它允许直接在磁盘上流式传输，但它只适用于 chrome 和 opera。

未受保护端点的问题

这种情况的另一种常见方式是允许匿名访问下载端点，首先请求 one-time-token，创建包含此令牌的 url，让用户直接下载它通过浏览器打开一个新标签并在开始下载后立即关闭它。

这种方法需要 2 个下载请求，并且看起来很华丽供用户观看。我不确定这是否适用于移动浏览器（打开新选项卡以供下载）并且它看起来像 hack，至少对我而言。 API必须保证url的有效期很短and/or不能连续使用2次

有想法吗？

有谁知道这种常见场景的干净、modern/state 艺术和性能方式？

大公司是如何处理这个问题的（google drive、dropbox、amazon）？

我个人更愿意让浏览器下载文件（而不是客户端 blob 下载）。当客户端单击（href'ed）link 时，也许有一种方法可以 "inject" 将不记名令牌作为默认请求 headers 发送给浏览器。

为什么现代 angular rich-client 将受保护的二进制文件下载委托给浏览器并不容易？

Answer 1

为什么不用网络套接字？预计这可能不是最好的方法（根据此 near similar question 的最佳答案），但我复制粘贴了@Ibrahim Muhammad 的答案以防它对您有所帮助：

You could use https://github.com/binaryjs/binaryjs or https://github.com/liamks/Delivery.js if you can run node.js on the server.

Answer 2

很遗憾，我不知道有什么方法可以解决您关于 FileSaver.js 和 StreamSaver.js 的问题。

尽管如此，我有一个类似的问题需要解决，这表明你想使用 "unprotected endpoint"。

好吧，我会去为文件创建一个一次性令牌，当然，它包含在 URL 中。（我知道，我知道，这不是最好的解决方案 - 如果有人为此提出 "best" 实践，我将不胜感激）

您的想法提到了 "flashy" 用户的恶劣行为。我通过注入触发下载的表单找到了解决此 "flashy" 问题的解决方案。

jQuery('<form action="' + YOUR_URL + '" method="get"></form>')
    .appendTo('body')
    .submit()
    .remove();

然后下载由浏览器的标准下载对话框处理，没有那个令人讨厌的新选项卡立即打开和关闭。

注：

I haven't tested this for files of your size. But it works for files until 1GB flawlessly. Maybe you give it a shot and I hope this helps.

cross-browser solution for downloading large files from authenticated endpoint