いくつかのビデオをダウンロードしようとすると、新しい URL にリダイレクトされ、ビデオの再生が開始されます。 「使い捨てコンテンツ タイプ」をサーバーから受信できませんでした

Question

クリックひとつで特定の動画をダウンロードしたいと考えています。これを行うために、ボタンを作成し、関連するビデオのダウンロードをトリガーする関数を追加しました。 ただし、ダウンロードできるのはビデオのリンクのみで、ビデオはダウンロードできません。外部ダウンローダーを使用してビデオをダウンロードするか、ブラウザのダウンロード セクションに URL をドラッグするだけです。ただし、JavaScript を介してアクティビティをトリガーすることはできません。私を助けてください。

この問題を解決するために複数の方法を試しました:

1. Axios を使用せずに単純な BLOB テクノロジーを使用します:

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)

エンドポイント: ビデオ URL は 122 バイトのファイルとしてダウンロードされます

2. 次に、ファイル保護パッケージを使用します。

 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')

3. 次に、フォーム メソッドを使用します。

<form method="get" action="file.doc">
   <button type="submit">ダウンロード!</button>
</フォーム>

エンドポイント: ビデオは同じウィンドウで再生を開始します

4. href ダウンロード属性を使用します:

関数ダウンロード(url) {
  const a = document.createElement('a')
  a.href = URL
  a.download = url.split('/').pop()
  document.body.appendChild(a)
  a.click()
  document.body.removeChild(a)
}

エンドポイント: ビデオは同じウィンドウで再生を開始します

5. 独自のメソッドを使用します:

const link = document.createElement('a')
link.href = URL
link.click()

エンドポイント: ビデオは同じウィンドウで再生を開始します

6. Axios のデフォルトが使用されるようになりました:

 axios.defaults.withCredentials = true
     window.open(
       'https://cdn.pixaandom_urlrbay.com/vieo/487508532/Woman - 58142.mp4?rendition=source&expiry=1666842719&hash=7dd6d178d9dbbd8adaf68dafd80c9167e91eca21&down​​load'
     )

エンドポイント: 新しいウィンドウでビデオの再生が開始されます

7. AXIOS を使用して、ヘッダーにワンタイム コンテンツ タイプを追加します。

 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('レックス')
       })

<ブロック引用>

エンドポイント: クロスオリジン要求がブロックされました: 同一オリジン ポリシーにより、redis-random_url/videos/be319-72e1-2e79-8dc3-bcef1/… にあるリモート リソースの読み取りは許可されません。 (原因: CORS ヘッダー「Access-Control-Allow-Origin」がありません)。ステータスコード: 200

Answer 1

私は VueJS を使用しませんが、this.src_url はビデオ URL パスの text にすぎないと思われます。

HTML5 では、サーバー上に存在するファイルのみをダウンロードできます。ファイルが外部の場合は、外部バイトを JS バッファ配列に読み取るために、PHP スクリプト (HTML ファイルと同じサーバー上にあります) が必要です。

リーリー

次のようにする必要があります:

リーリー

バイトの読み取りは、FileReader API または Fetch API を使用して実行できます。

VueJS を使用してファイルのバイトを配列に読み込むことができれば、問題は解決します。