Start loading a large file from a fully formed response

Question

Problem

I have a Node.js endpoint that correctly starts loading an arbitrarily large file on access using the following:

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

where resultis to transform the stream , and responseis the Express object .

This works great with direct access to the endpoint in Chrome, Firefox, Internet Explorer, etc. The problem arises from trying to reach the endpoint when token-based authentication is enabled.

From the user's point of view, when they click the button, the file is downloaded.

How to make the button hit this endpoint with the correct authentication token in the request header and cause the file to load?

Brainstorming Some Possible Approaches

• , , redux-api-middleware, GET ( , ). , 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);
  }
  

  , , , .

• , , Redux , React , .

  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 - , .

  , . , - .

• # 2, , HTTP- .
• # 1 # 2, , , GET , , . # 2.
• - /.
• URL ( ), # 2.
• , . , URL # 2.

Answer 1

№7 .