使用标头身份验证在 Angular 中下载大文件答案

【问题标题】：Downloading large files in Angular with Header Authentication使用标头身份验证在 Angular 中下载大文件
【发布时间】：2019-10-14 15:10:04
【问题描述】：

我们有一个 Angular 6 应用程序，它过去使用流式传输从后端下载生成的大型文件，这意味着后端和客户端都没有将整个文件加载到内存中，因为这些文件可能有数百或数千 MB。我们使用了以下响应头：

Content-Disposition: attachment;filename=<generated filename>
Content-Type: text/csv; charset=utf-8

我们使用了window.open(exportLink, '_blank')，在使用基于 Cookie 的身份验证时效果很好。我们现在更改为基于标头的标记。现在，由于缺少标头，后端返回 403。

我了解，使用 windows.open 和 windows.location 等任何方法都不支持传递标头。

那么唯一的选择就是使用客户端 API（例如 Angular HTTP 客户端 + FileSaver）。然而，这不适用于大文件，因为它会达到浏览器的内存限制。

我们尝试了StreamSaver 和 Angular HTTP 客户端，但似乎无法正常工作。我们还尝试将浏览器 Fetch API 与流保护程序一起使用。

使用类似于 StreamSaver 存储库中提供的示例的后者似乎可以工作（意味着控制台输出表明文件保存成功），但我们在浏览器中看不到任何文件下载指示。

是否有人使用基于标头的令牌身份验证实现大文件流下载以及如何实现？

【问题讨论】：

【解决方案1】：

您可以尝试的一件事是一次性令牌：

当您需要下载文件时 - 您首先使用第一个端点获取 url，然后以您喜欢的任何方式下载它

【讨论】：

理论上，这是一个选项，但它需要后端的状态。我们要么将单个令牌保留在内存中，这将失去 12 个因素之一，要么我们需要将其存储在数据库中，这是一个更大的努力实现。
我接受了这个答案，因为我们找不到任何仅限客户端的解决方案，这似乎是最优雅和最安全的解决方案，因为我们会生成一次性令牌。但正如我所说，这需要一些努力才能在分布式系统中实现。实际上，我们通过将代理更改为接受 access_token url 参数并将其重新写入适当的标头字段来解决它。