node.js - 从完整格式的响应触发大文件下载

Question

问题

我有一个 Node.js 端点，可以在使用以下访问时正确触发任意大文件下载:

response.setHeader('Content-disposition', 'attachment; filename=' + fileName);
response.set('Content-Type', 'text/csv');
response.status(200);
result.pipe(response);

其中 result 是 transform stream , response 是一个 Express object .

这在直接访问 Chrome、Firefox、Internet Explorer 等端点时工作正常。问题是在启用基于 token 的身份验证时尝试访问端点。

从用户的角度来看，当他们点击一个按钮时，就会下载一个文件。

如何使用请求 header 中的正确身份验证 token 使按钮点击此端点并下载文件？

一些可能的方法的头脑 Storm

1. 当用户点击按钮时，它会触发一个由 redux-api-middleware 处理的操作，它向端点发出 GET 请求(使用身份验证 token 自动包含在请求中)。这个中间件将响应保存在一个变量中，该变量由 React 组件获取。在这个 React 组件中，如果正在使用的浏览器(即 Chrome 和 Opera)支持流，response.body 将存在，因此您可以执行如下操作。

   if (response.body) {
       const csvReader = response.body.getReader();
       const textDecoder = new TextDecoder();
       const processCsvRow = (csvRow) => {
           if (csvRow.done) {
               console.log('Finished downloading file.');
               return Promise.resolve();
           }
   
           // Write to new file for user to download
           console.log(textDecoder.decode(csvRow.value, {stream: true}));
   
           return csvReader.read().then(processCsvRow);
       };
   
       csvReader.read().then(processCsvRow);
   }
   

   使用这种方法，我需要研究在不支持流的浏览器接收数据时如何处理数据。

2. 当用户点击按钮时，它会触发一个操作，通过 reducer 将端点保存到 Redux 存储中，这会触发 React 组件创建一个自动点击的 anchor 标记。

   const link = document.createElement('a');
   document.body.appendChild(link); // Firefox requires the link to be in the body
   link.href = endPoint;
   link.target = '_blank';
   link.click();
   document.body.removeChild(link); // Remove the link when done
   

   其中 endPoint 是响应文件的端点。

   此方法在禁用身份验证时有效。重新启用身份验证时，身份验证 token 必须以某种方式注入(inject)到 anchor 标记的请求 header 中。

3. 与 #2 类似，研究通过构建带有内置身份验证 token 的 HTTP 请求来模拟 anchor 点击。
4. 结合#1 和#2 中的元素，当用户单击按钮时，将触发一个操作，向端点发送一个GET 请求，返回第二个临时不安全的端点-返回实际文件响应的点。将这个临时的不安全端点传递给 #2 中的 anchor 标记。
5. 以某种方式将响应重定向到新的选项卡/窗口。
6. 将身份验证 token 作为 URL 参数传递(这是一个安全问题)，然后使用 #2。
7. 创建一个新的端点，生成并返回一个新的临时一次性使用仅下载 token 。使用这个新端点获取一个临时 token ，作为 URL 参数通过 #2 传递到原始端点。

Answer 1

我决定暂时采用方法 7。