title: Downloading a file from a Node.JS API REST (express) with React.JS (Axios Get)
body: <p>I have a React JS application that as a Backend has an API REST made with Node JS.</p>
  <p>Currently, my objective is to be able to download files that are on the server.
  The correct behavior should be that the user, after clicking on &quot;Download file&quot;, should receive the file (Download with browser).</p>
  <p>On the <strong>server-side</strong>, I have something like this (obviously, I'm gonna simplify it by removing JWT middleware, DB queries, etc..):</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const express = require('express');
  const router = express.Router();
  const bodyParser = require("body-parser");
  const cors = require("cors");
  
  const app = express();
  app.use(cors({ origin: "http://localhost:3000" }));
  app.use(bodyParser.json());
  app.use(bodyParser.urlencoded({ extended: true }));
  
  router.get('/download', (req, res, next) =&gt; {
    res.download("\\\\folder\\subfolder\\myfile.txt");
  });
  
  app.use('/api', router);
  const PORT = 3001;
  app.listen(PORT, function() {
      console.log("Server is running on port "+PORT);
  });</code></pre>
  </div>
  </div>
  </p>
  <p>Then, as I have said, I have a React JS application working as a <strong>Frontend</strong>:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>apihelperdownload () {
    return axios.get(API_URL + "download").then(function (response) {
        return response;
    })
  }
  
  .............
  
  function downloadFile() {
    apihelperdownload().then(
        (res) =&gt; {
            // Should I do something here with response?
        },
        (error) =&gt; {
            
        }
    )
    
  }
  
  
  &lt;button className="download" onClick={() =&gt; downloadFile()}&gt;
    Download File
  &lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>I have two files on my server, one TXT and one JPG.
  Both have the correct path (I'm not getting any &quot;file/path not found&quot; error) and I am receiving a &quot;200 status OK&quot; in both cases... But I can't download the files.</p>
  <p><strong>Also:</strong></p>
  <ul>
  <li>In the JPG case, in Network Tab, on preview sub-Tab I can see the image (so the browser is receiving the image).</li>
  </ul>
  <p>And the response looks like this:</p>
  <p><a href="https://i.stack.imgur.com/pB74V.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pB74V.png" alt="enter image description here" /></a></p>
  <p><em>(ignore the params and the different url, it's just that here is not simplified)</em></p>
  <p><strike>- In the TXT case, in Network Tab, on preview sub-Tab I can just see a white page.</p>
  <p>And the response looks like this:</p>
  <p><a href="https://i.stack.imgur.com/DPVv7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DPVv7.png" alt="enter image description here" /></a></p>
  <p>As you can see, in this second case (.txt file), the data is &quot;empty&quot; ( &quot;&quot; )</strike>
  <br />
  <em>Data is the correct text.. I didn't save the txt file.. So it was empty..</em></p>
  <br />
  <br />
  <p>I have checked several related questions like this <a href="https://stackoverflow.com/questions/7288814/download-a-file-from-nodejs-server-using-express">Download a file from NodeJS Server using Express</a></p>
  <p>But unfortunately, I haven't found how to solve my issue.</p>
  <p><strong>1) What am I doing wrong on the server-side?</strong></p>
  <p><strong>2) What I have to do with the response on client-side?</strong></p>
  <p>Thanks</p>