いくつかのビデオをダウンロードしようとすると、新しい URL にリダイレクトされ、ビデオの再生が開始されます。 「使い捨てコンテンツ タイプ」をサーバーから受信できませんでした
<p>クリックひとつで特定の動画をダウンロードしたいと考えています。これを行うために、ボタンを作成し、関連するビデオのダウンロードをトリガーする関数を追加しました。
ただし、ダウンロードできるのはビデオのリンクのみで、ビデオはダウンロードできません。外部ダウンローダーを使用してビデオをダウンロードするか、ブラウザのダウンロード セクションに URL をドラッグするだけです。ただし、JavaScript を介してアクティビティをトリガーすることはできません。私を助けてください。</p>
<p>この問題を解決するために複数の方法を試しました:</p>
<ol>
<li>Axios を使用せずに単純な BLOB テクノロジーを使用します: </li>
</ol>
<pre class="brush:js;toolbar:false;">const blob = new Blob([this.src_url], { type: 'video/mp4' })
const link = document.createElement('a')
link.href = URL.createObjectURL(blob)
link.download = this.src_url.replace(
>! // 'https://redis-test.com/videos/',
link.click()
URL.revokeObjectURL(link.href)
</pre>
<p>エンドポイント: ビデオ URL は 122 バイトのファイルとしてダウンロードされます</p>
<ol start="2">
<li>次に、ファイル保護パッケージを使用します。</li>
</ol>
<pre class="brush:js;toolbar:false;"> var FileSaver = require('file-saver')
console.log(this.src_url)
var blob = 新しい Blob([this.src_url], { type: 'video/mp4' })
FileSaver.saveAs(blob, 'hello world.mp4')
</pre>
<ol start="3">
<li>次に、フォーム メソッドを使用します。</li>
</ol>
<pre class="brush:html;toolbar:false;"><form method="get" action="file.doc">
<button type="submit">ダウンロード!</button>
</フォーム>
</pre>
<p>エンドポイント: ビデオは同じウィンドウで再生を開始します</p>
<ol start="4">
<li>href ダウンロード属性を使用します: </li>
</ol>
<pre class="brush:js;toolbar:false;">関数ダウンロード(url) {
const a = document.createElement('a')
a.href = URL
a.download = url.split('/').pop()
document.body.appendChild(a)
a.click()
document.body.removeChild(a)
}</pre>
<p>エンドポイント: ビデオは同じウィンドウで再生を開始します</p>
<ol start="5">
<li>独自のメソッドを使用します: </li>
</ol>
<pre class="brush:js;toolbar:false;">const link = document.createElement('a')
link.href = URL
link.click()
</pre>
<p>エンドポイント: ビデオは同じウィンドウで再生を開始します</p>
<ol start="6">
<li>Axios のデフォルトが使用されるようになりました: </li>
</ol>
<pre class="brush:js;toolbar:false;"> axios.defaults.withCredentials = true
window.open(
'https://cdn.pixaandom_urlrbay.com/vieo/487508532/Woman - 58142.mp4?rendition=source&expiry=1666842719&hash=7dd6d178d9dbbd8adaf68dafd80c9167e91eca21&download'
)
</pre>
<p>エンドポイント: 新しいウィンドウでビデオの再生が開始されます</p>
<ol start="7">
<li>AXIOS を使用して、ヘッダーにワンタイム コンテンツ タイプを追加します。</li>
</ol>
<pre class="brush:js;toolbar:false;"> axios
。得る（
文字列(nuxtConfig.axios.mediaURL)
this.src_url.replace(
「https://redisrandom_url.com/videos/」、
」
）、
{
ヘッダー: {
モード: 'no-cors'、
参照者ポリシー: '参照者なし',
'Content-Disposition': '添付ファイル; ファイル名=女性 - 58142.mp4',
ホスト: 「redis-nfs」、
'ユーザーエージェント': 'PostmanRuntime/7.29.2',
受け入れる： '*/*'、
'Accept-Language': 'en-US,en;q=0.5',
'Accept-Encoding': 'gzip、deflate、br',
接続: 'キープアライブ'、
クッキー：
'tk_or="https://www.google.com/"; tk_lr="https://www.google.com/"; _gcl_au=1.1.954672920.1660108804; _ga=GA1.2.1392122600.1660108808; _fbp=fb.1.1660108809200 .1970395787'、
'安全でないアップグレード要求': '1',
'Sec-Fetch-Dest': 'ドキュメント',
'Sec-Fetch-Mode': 'ナビゲート',
'Sec-Fetch-Site': 'なし',
'Sec-Fetch-User': '?1',
プラグマ: 'キャッシュなし'、
'キャッシュ制御': 'キャッシュなし',
}、
}
)
.then((応答) => {
コンソールログ(応答)
const url = window.URL.createObjectURL(新しい Blob([response.data]))
const link = document.createElement('a')
link.href = URL
link.setAttribute('ダウンロード', 'タイトル')
document.body.appendChild(リンク)
link.click()
})
.catch((エラー) => {
console.log('レックス')
})
</pre>
<ブロック引用>
<p>エンドポイント: クロスオリジン要求がブロックされました: 同一オリジン ポリシーにより、redis-random_url/videos/be319-72e1-2e79-8dc3-bcef1/… にあるリモート リソースの読み取りは許可されません。 (原因: CORS ヘッダー「Access-Control-Allow-Origin」がありません)。ステータスコード: 200</p>
</blockquote><p><br /></p>
