Le téléchargement d'une vidéo depuis une API dans React à l'aide d'Axios crée un fichier mp4 vide.

Question

J'ai une api qui renvoie une vidéo (route vérifiée dans Postman) mais lorsque j'essaie d'implémenter un bouton "télécharger la vidéo", il télécharge un fichier vide.

J'ai essayé plusieurs implémentations avec des résultats au mieux identiques, mais voici le code actuel :

const handleDownloadVideo = async () => {
    const axios = require('axios');

    const config = {
        method: 'get',
        url: `http://localhost:3001/api/v1/render/video/${UUID}/download/`,
        headers: { 
            'Authorization': 'Bearer {token}', 
            'responseType': 'blob',
            'maxContentLength': Infinity,
            'maxBodyLength': Infinity
        }
    };

    axios(config)
    .then((response) => {
        const link = document.createElement('a');
        link.target = '_blank';
        link.download = `${UUID}.mp4`;
        link.href = URL.createObjectURL(new Blob([response.data], { type: "video/mp4" }));
        link.click();
    })
    .catch(function (error) {
        console.error(error);
    });
};

Je ne m'attendais pas à ce que ce soit une tâche difficile et pourtant j'y suis confronté depuis plusieurs jours. Quelqu'un peut-il m'expliquer ce que je fais de travers ?

Answer 1

Je ne sais pas si cela peut résoudre le problème, mais la configuration de votre demande est la suivante responseType , maxContentLength y maxBodyLength doit se trouver à l'extérieur de l'objet d'en-tête.

const config = {
    method: 'get',
    url: `http://localhost:3001/api/v1/render/video/${UUID}/download/`,
    responseType: 'blob',
    maxContentLength: Infinity,
    maxBodyLength: Infinity
    headers: {
        'Authorization': 'Bearer {token}'
    }
};