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
P粉578343994
2023-08-28 09:24:28
<p>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.</p>
<p>I tried multiple ways to resolve this issue:</p>
<ol>
<li>Use simple blob technology without Axios: </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>Endpoint: Video URL is downloaded as a 122-byte file</p>
<ol start="2">
<li>Then use the file protection package: </li>
</ol>
<pre class="brush:js;toolbar:false;"> 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')
</pre>
<ol start="3">
<li>Then use the form method: </li>
</ol>
<pre class="brush:html;toolbar:false;"><form method="get" action="file.doc">
<button type="submit">Download!</button>
</form>
</pre>
<p>Endpoint: Video starts playing in the same window</p>
<ol start="4">
<li>Use the href download attribute: </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.click()
document.body.removeChild(a)
}</pre>
<p>Endpoint: Video starts playing in the same window</p>
<ol start="5">
<li>Use your method: </li>
</ol>
<pre class="brush:js;toolbar:false;">const link = document.createElement('a')
link.href = url
link.click()
</pre>
<p>Endpoint: Video starts playing in the same window</p>
<ol start="6">
<li>Now uses the Axios default: </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>Endpoint: Video starts playing in new window</p>
<ol start="7">
<li>Use AXIOS to append a one-time content type in the header: </li>
</ol>
<pre class="brush:js;toolbar:false;"> 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')
})
</pre>
<blockquote>
<p>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</p>
</blockquote><p><br /></p>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
I don't use VueJS, but I suspect
this.src_urlis 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.