The file downloads but broken

[thidasapankaja]

I'm implementing a youtube video downloader using [ytdl-core][1] with Nodejs backend and Reactjs frontend. However, using ytdl-core library I'm able to send to the youtube video file to the frontend with this code block

    app.get('/download', (req, res) => {
        let { url, itag } = req.query;
        let id = ytdl.getURLVideoID(url);

        ytdl.getInfo(id, (err, info) => {
            if (err) {
                console.log(err);
                throw err;
            }
            else{
                let audioandvideo = ytdl.filterFormats(info.formats, 'audioandvideo');       
                let video = audioandvideo.filter(obj => obj.itag === itag);

                video = video[0]

                res.header('Content-Disposition', `attachment; filename="${info.title}.${video.container}"`);
                res.header('Content-Type', 'video/mp4');

                ytdl(url, {
                    format: video
                }).pipe(res); 
            }             
        })
    });

However, the file downloads correctly if I redirect the webpage to the route like this

window.location.href = `http://localhost:5000/download?url=${this.state.url}&itag=${itag}`;

This works fine and the video downloads correctly. But as it's a redirection I can't do that in a hosted site. So, I need to use axios to do this.

I did some research and found out some solutions. I tried with this library following the accepted answer here. It downloads the file to the client directory but the file won't play. This is the code block I used for that

      downloadVideo(itag){

        axios.get(`http://localhost:5000/download`, {
          params: { url: this.state.url, itag },
        })
        .then(response => {
          fileDownload(response.data, `video.mp4`);
        })
        .catch(err => console.log(err));
      }

As it's not working I tried another approach mentioned in the previously mentioned StackOverflow answer as well. It also downloads the file but doesn't work as well.

How can I get this fixed? What may be the reason my axios request doesn't work correctly?

[thidasapankaja]

using responseType: 'blob' makes it work.

      downloadVideo(itag){

        axios.get(`http://localhost:5000/download`, {
          params: { url: this.state.url, itag },
          responseType: 'blob'
        })
        .then(response => {
          fileDownload(response.data, `video.mp4`);
        })
        .catch(err => console.log(err));
      }