When trying to download some videos, it redirects to a new URL and then the video starts playing. 'Disposable content type' not received from server

Question

I want to download certain videos with a click. To do this, I created a button and attached a function that should trigger the download of the relevant video. But I can only download the link of the video, not the video. I can download the video using an external downloader or just drag the URL into the downloads section of the browser. But the activity cannot be triggered via JavaScript. please help me.

I tried multiple ways to resolve this issue:

1. Use simple blob technology without Axios:

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)

Endpoint: Video URL is downloaded as a 122-byte file

2. Then use the file protection package:

 var FileSaver = require('file-saver')
    console.log(this.src_url)
    var blob = new Blob([this.src_url], { type: 'video/mp4' })
    FileSaver.saveAs(blob, 'hello world.mp4')

3. Then use the form method:

<form method="get" action="file.doc">
   <button type="submit">Download!</button>
</form>

Endpoint: Video starts playing in the same window

4. Use the href download attribute:

function download(url) {
  const a = document.createElement('a')
  a.href = url
  a.download = url.split('/').pop()
  document.body.appendChild(a)
  a.click()
  document.body.removeChild(a)
}

Endpoint: Video starts playing in the same window

5. Use your method:

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

Endpoint: Video starts playing in the same window

6. Now uses the Axios default:

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

Endpoint: Video starts playing in new window

7. Use AXIOS to append a one-time content type in the header:

 axios
       .get(
         String(nuxtConfig.axios.mediaURL)
           this.src_url.replace(
             'https://redisrandom_url.com/videos/',
             ''
           ),
         {
           headers: {
             mode: 'no-cors',
             referrerPolicy: 'no-referrer',
             'Content-Disposition': 'attachment; filename=Woman - 58142.mp4',
             Host: 'redis-nfs',
             'User-Agent': 'PostmanRuntime/7.29.2',
             Accept: '*/*',
             'Accept-Language': 'en-US,en;q=0.5',
             'Accept-Encoding': 'gzip, deflate, br',
             Connection: 'keep-alive',
             Cookies:
               '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',
             'Upgrade-Insecure-Requests': '1',
             'Sec-Fetch-Dest': 'document',
             'Sec-Fetch-Mode': 'navigate',
             'Sec-Fetch-Site': 'none',
             'Sec-Fetch-User': '?1',
             Pragma: 'no-cache',
             'Cache-Control': 'no-cache',
           },
         }
       )
       .then((response) => {
         console.log(response)

         const url = window.URL.createObjectURL(new Blob([response.data]))
         const link = document.createElement('a')
         link.href = url
         link.setAttribute('download', 'title')
         document.body.appendChild(link)
         link.click()
       })
       .catch((error) => {
         console.log('rex')
       })

Endpoint: Cross-origin request blocked: The same-origin policy does not allow reading the remote resource at redis-random_url/videos/be319-72e1-2e79-8dc3-bcef1/…. (Cause: CORS header 'Access-Control-Allow-Origin' is missing). Status code: 200

Answer 1

I don't use VueJS, but I suspect this.src_url is just the text of the video URL path.

In HTML5, you can only download files that exist on the server. If the file is external, then you need a PHP script (on the same server as your HTML file) to read those external bytes back into your JS buffer array.

const blob = new Blob([this.src_url], { type: 'video/mp4' })

should be:

let myBytes = //# update variable with data result of reading files bytes
let myBlob = new Blob(  [ Uint8Array.from( myBytes ) ] , {type: "application/octet-stream"} );

Byte reading can be done using FileReader API or Fetch API.

Your problem is solved when you can read the bytes of a file into an array using VueJS.