일부 비디오를 다운로드하려고 하면 새 URL로 리디렉션된 다음 비디오 재생이 시작됩니다. 서버에서 '일회용 콘텐츠 유형'을 받지 못했습니다.

Question

클릭 한 번으로 특정 동영상을 다운로드하고 싶습니다. 이를 위해 버튼을 만들고 관련 비디오의 다운로드를 실행하는 기능을 첨부했습니다. 그런데 영상이 아닌 링크만 다운로드가 가능하네요. 외부 다운로더를 사용하여 비디오를 다운로드하거나 URL을 브라우저의 다운로드 섹션으로 드래그할 수 있습니다. 그러나 활동은 JavaScript를 통해 트리거될 수 없습니다. 도와주세요.

이 문제를 해결하기 위해 여러 가지 방법을 시도했습니다.

<올>

Axios 없이 간단한 blob 기술을 사용하세요.

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)

엔드포인트: 비디오 URL이 122바이트 파일로 다운로드됩니다

2. 그런 다음 파일 보호 패키지를 사용하세요.

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

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.클릭()
  document.body.removeChild(a)
}

끝점: 동영상이 같은 창에서 재생되기 시작합니다

5. 다음 방법을 사용하세요.

const link = document.createElement('a')
link.href = URL
링크.클릭()

끝점: 동영상이 같은 창에서 재생되기 시작합니다

6. 이제 Axios 기본값을 사용합니다:

 axios.defaults.withCredentials = true
     창.열기(
       'https://cdn.pixaandom_urlrbay.com/vieo/487508532/Woman%20-%2058142.mp4?rendition=source&expiry=1666842719&hash=7dd6d178d9dbbd8adaf68dafd80c9167e91eca21&다운로드'
     )

끝점: 동영상이 새 창에서 재생되기 시작합니다

7. AXIOS를 사용하여 헤더에 일회성 콘텐츠 유형을 추가합니다.

       .얻다(
         문자열(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('렉스')
       })

<인용문>

엔드포인트: 교차 출처 요청 차단됨: 동일 출처 정책은 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 버퍼 배열로 다시 읽으려면 HTML 파일과 동일한 서버에 있는 PHP 스크립트가 필요합니다.

으아악

다음과 같아야 합니다:

으아악

바이트 읽기는 FileReader API 또는 Fetch API를 사용하여 수행할 수 있습니다.

VueJS를 사용하여 파일의 바이트를 배열로 읽을 수 있으면 문제가 해결됩니다.