일부 비디오를 다운로드하려고 하면 새 URL로 리디렉션된 다음 비디오 재생이 시작됩니다. 서버에서 '일회용 콘텐츠 유형'을 받지 못했습니다.
<p>클릭 한 번으로 특정 동영상을 다운로드하고 싶습니다. 이를 위해 버튼을 만들고 관련 비디오의 다운로드를 실행하는 기능을 첨부했습니다.
그런데 영상이 아닌 링크만 다운로드가 가능하네요. 외부 다운로더를 사용하여 비디오를 다운로드하거나 URL을 브라우저의 다운로드 섹션으로 드래그할 수 있습니다. 그러나 활동은 JavaScript를 통해 트리거될 수 없습니다. 도와주세요.</p>
<p>이 문제를 해결하기 위해 여러 가지 방법을 시도했습니다. </p>
<올>
<li>Axios 없이 간단한 blob 기술을 사용하세요. </li>
</ol>
<pre class="brush:js;toolbar:false;">const blob = new Blob([this.src_url], { type: 'video/mp4' })
const 링크 = document.createElement('a')
link.href = URL.createObjectURL(블롭)
link.download = this.src_url.replace(
> // 'https://redis-test.com/videos/',
링크.클릭()
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 = new Blob([this.src_url], { 유형: '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.클릭()
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
링크.클릭()
</pre>
<p>끝점: 동영상이 같은 창에서 재생되기 시작합니다</p>
<ol start="6">
<li>이제 Axios 기본값을 사용합니다: </li>
</ol>
<pre class="brush:js;toolbar:false;"> axios.defaults.withCredentials = true
창.열기(
'https://cdn.pixaandom_urlrbay.com/vieo/487508532/Woman%20-%2058142.mp4?rendition=source&expiry=1666842719&hash=7dd6d178d9dbbd8adaf68dafd80c9167e91eca21&다운로드'
)
</pre>
<p>끝점: 동영상이 새 창에서 재생되기 시작합니다</p>
<ol start="7">
<li>AXIOS를 사용하여 헤더에 일회성 콘텐츠 유형을 추가합니다. </li>
</ol>
<pre class="brush:js;toolbar:false;">
.얻다(
문자열(nuxtConfig.axios.mediaURL) +
this.src_url.replace(
'https://redisrandom_url.com/videos/',
''
),
{
헤더: {
모드: 'no-cors',
ReferrerPolicy: '추천자 없음',
'콘텐츠-처리': '첨부파일명=여성 - 58142.mp4',
호스트: 'redis-nfs',
'사용자 에이전트': 'PostmanRuntime/7.29.2',
수용하다: '*/*',
'수용 언어': 'en-US,en;q=0.5',
'인코딩 허용': 'gzip, deflate, br',
연결: '연결 유지',
쿠키:
'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',
'업그레이드-안전하지 않은-요청': '1',
'Sec-Fetch-Dest': '문서',
'Sec-Fetch-Mode': '탐색',
'Sec-Fetch-Site': '없음',
'Sec-Fetch-User': '?1',
Pragma: '캐시 없음',
'캐시 제어': '캐시 없음',
},
}
)
.then((응답) => {
console.log(응답)
const url = window.URL.createObjectURL(새 Blob([response.data]))
const 링크 = document.createElement('a')
link.href = URL
link.setAttribute('다운로드', '제목')
document.body.appendChild(링크)
링크.클릭()
})
.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>
