Lorsque vous essayez de télécharger des vidéos, la lecture est redirigée vers une nouvelle URL, puis la vidéo commence. « Type de contenu jetable » non reçu du serveur
<p>Je souhaite télécharger certaines vidéos en un clic. Pour ce faire, j'ai créé un bouton et attaché une fonction qui doit déclencher le téléchargement de la vidéo concernée.
Mais je ne peux télécharger que le lien de la vidéo, pas la vidéo. Je peux télécharger la vidéo à l'aide d'un téléchargeur externe ou simplement faire glisser l'URL dans la section téléchargements du navigateur. Mais l'activité ne peut pas être déclenchée via JavaScript. S'il vous plaît aidez-moi.</p>
<p>J'ai essayé plusieurs façons de résoudre ce problème : </p>
<ol>
<li>Utiliser une technologie blob simple sans Axios : </li>
</ol>
<pre class="brush:js;toolbar:false;">const blob = new Blob([this.src_url], { type : 'video/mp4' })
lien const = document.createElement('a')
lien.href = URL.createObjectURL(blob)
lien.download = this.src_url.replace(
> ! // 'https://redis-test.com/videos/',
lien.cliquez()
URL.revokeObjectURL(lien.href)
≪/pré>
<p>Point de terminaison : l'URL de la vidéo est téléchargée sous forme de fichier de 122 octets</p>
<ol start="2">
<li>Utilisez ensuite le package de protection de fichiers : </li>
</ol>
<pre class="brush:js;toolbar:false;"> var FileSaver = require('file-saver')
console.log(this.src_url)
var blob = nouveau Blob([this.src_url], { type : 'video/mp4' })
FileSaver.saveAs(blob, 'bonjour le monde.mp4')
≪/pré>
<ol start="3">
<li>Utilisez ensuite la méthode du formulaire : </li>
</ol>
<pre class="brush:html;toolbar:false;"><form method="get" action="file.doc">
<button type="submit">Télécharger !</button>
</formulaire>
≪/pré>
<p>Point final : la lecture de la vidéo commence dans la même fenêtre</p>
<ol start="4">
<li>Utilisez l'attribut de téléchargement href : </li>
</ol>
<pre class="brush:js;toolbar:false;">function download(url) {
const a = document.createElement('a')
a.href = URL
a.download = url.split('/').pop()
document.body.appendChild(a)
a.cliquez()
document.body.removeChild(a)
}≪/pré>
<p>Point final : la lecture de la vidéo commence dans la même fenêtre</p>
<ol start="5">
<li>Utilisez votre méthode : </li>
</ol>
<pre class="brush:js;toolbar:false;">const link = document.createElement('a')
lien.href = url
lien.cliquez()
≪/pré>
<p>Point final : la lecture de la vidéo commence dans la même fenêtre</p>
<ol start="6">
<li>Utilise désormais la valeur par défaut d'Axios : </li>
</ol>
<pre class="brush:js;toolbar:false;"> axios.defaults.withCredentials = true
fenêtre.open(
'https://cdn.pixaandom_urlrbay.com/vieo/487508532/Woman%20-%2058142.mp4?rendition=source&expiry=1666842719&hash=7dd6d178d9dbbd8adaf68dafd80c9167e91eca21&download'
)
≪/pré>
<p>Point final : la lecture de la vidéo commence dans une nouvelle fenêtre</p>
<ol start="7">
<li>Utilisez AXIOS pour ajouter un type de contenu unique dans l'en-tête : </li>
</ol>
<pre class="brush:js;toolbar:false;">
.obtenir(
Chaîne (nuxtConfig.axios.mediaURL) +
this.src_url.replace(
'https://redisrandom_url.com/videos/',
''
),
{
en-têtes : {
mode : 'sans cors',
referrerPolicy : 'non-référent',
'Content-Disposition' : 'pièce jointe ; nom de fichier=Femme - 58142.mp4',
Hôte : 'redis-nfs',
'Agent utilisateur' : 'PostmanRuntime/7.29.2',
Accepter: '*/*',
'Accepter-Langue' : 'en-US,en;q=0.5',
'Accept-Encoding' : 'gzip, deflate, br',
Connexion : 'keep-alive',
Biscuits:
'tk_or=%22https%3A%2F%2Fwww.google.com%2F%22 ; tk_lr=%22https%3A%2F%2Fwww.google.com%2F%22 _gcl_au=1.1.954672920.1660108804 ; .1660108808 ; _fbp=fb.1.1660108809200.1970395787',
'Demandes de mise à niveau non sécurisées' : '1',
'Sec-Fetch-Dest' : 'document',
'Sec-Fetch-Mode' : 'naviguer',
'Sec-Fetch-Site' : 'aucun',
'Sec-Fetch-Utilisateur' : '?1',
Pragma : « sans cache »,
'Cache-Control' : 'pas de cache',
},
}
)
.then((réponse) => {
console.log (réponse)
const url = window.URL.createObjectURL(new Blob([response.data]))
lien const = document.createElement('a')
lien.href = url
link.setAttribute('télécharger', 'titre')
document.body.appendChild(lien)
lien.cliquez()
})
.catch((erreur) => {
console.log('rex')
})
≪/pré>
<blockquote>
<p>Point de terminaison : requête d'origine croisée bloquée : la stratégie de même origine ne permet pas de lire la ressource distante sur redis-random_url/videos/be319-72e1-2e79-8dc3-bcef1/…. (Cause : l'en-tête CORS 'Access-Control-Allow-Origin' est manquant). Code d'état : 200</p>
</blockquote><p><br /></p>
