Forum : Problème CORS avec l'API YouTube lors de l'upload résumable

Bonjour à tous,

Je travaille sur une fonctionnalité d'upload résumable de vidéos vers YouTube à l'aide de leur API, et je rencontre un problème spécifique avec les CORS (Cross-Origin Resource Sharing).
Contexte :

Frontend : Mon frontend est en JavaScript (fetch API) et initialise les uploads.
Backend : Mon backend (Symfony) génère l'URL d'upload résumable en appelant l'API YouTube et renvoie cette URL au frontend.
Upload :
Le frontend utilise cette URL pour uploader les chunks directement vers YouTube.
Tout fonctionne correctement jusqu'à environ 96% de l'upload.

Problème :

Lors du dernier chunk (vers 96% de progression), je reçois une erreur liée aux CORS :

Le corps de la réponse n’est pas disponible aux scripts (raison : CORS Missing Allow Origin).

Cela semble indiquer que l'API YouTube ne retourne pas les en-têtes Access-Control-Allow-Origin attendus.

Observations :

Lorsque je fais tout dans le frontend (initialisation de l'upload et envoi des chunks), cela fonctionne parfaitement jusqu'à la fin.
Lorsque j'utilise l'URL générée par mon backend, le problème survient uniquement à la dernière requête (finalisation de l'upload).

NB: j'ai pensé que faire un upload coté front me permet de ne pas surcharger mon serveur avec les fichiers qui peuvent être volumineux.

Auriez-vous des suggestions pour contourner ou résoudre ce problème s'il vous plaît ?

Une petite question ?

Une autre petite question, l'api Youtube ne permet que 10000 unités par jour, mais l'upload de vidéo consomme 1600 unités, donc on se retrouve très vite limité en mode développement je n'ai pas beaucoup de marge pour tester. Avez-vous des solutions pour pouvoir tester sans consommer d'unités si c'est possible ?

Michael Ndale

pour résoudre le problème CORS, je recommande de vérifier les en-têtes de la réponse, potentiellement ajuster la gestion des requêtes dans votre code

par ex.

fetch(uploadUrl, {
    method: 'PUT',
    headers: {
        'Content-Type': 'application/octet-stream',
        'Authorization': 'Bearer ' + accessToken,
        // Autres en-têtes nécessaires
    },
    body: chunkData,
    credentials: 'include',  // Ajout des cookies si nécessaire
})
.then(response => response.json())
.then(data => {
    if (data.status === 'finalize') {
        // Finalisation de l'upload
    }
})
.catch(error => console.error('Upload failed:', error));

Problème CORS avec l'API YouTube lors de l'upload résumable

1 réponse