a 标签跨域下载视频

qq_35661140

已于 2024-03-27 23:33:19 修改

阅读量310

点赞数 2

文章标签：前端 javascript 开发语言

于 2024-03-27 23:27:22 首次发布

本文链接：https://blog.csdn.net/qq_35661140/article/details/137093091

版权

文章介绍了如何使用Blob对象和添加title参数实现跨域下载YouTube视频的方法，解决了作者两天的困扰，强调了在下载工具中title参数的重要性。

摘要由CSDN通过智能技术生成

function download(blob: Blob, filename?: string) {
  const a: any = document.createElement('a')
  a.download = filename
  const blobUrl = URL.createObjectURL(blob)
  a.href = blobUrl
  document.body.appendChild(a)
  a.click()
  a.remove()
  URL.revokeObjectURL(blobUrl)
}

function downloadFile(url: string, filename?: string) {
  fetch(url, {
    headers: new Headers({
      Origin: location.origin,
    }),
    mode: 'cors',
  })
    .then(res => {
  		if( res.status == 200 ) {
      	// 返回的.blob()为promise，然后生成了blob对象，此方法获得的blob对象包含了数据类型，十分方便
     		return res.blob()
      }
          
      throw new Error(`status: ${response.status}.`)

  	})
    .then(blob => {
      download(blob, filename)
    })
}

。

这里貌似是没问题的。但是亲测。当跨域的时候，会直接打开so??

经过本人不屑努力,查找资料。发现一些下载youtube的工具，上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <a  download="" href="https://rr3---sn-ab5l6ndy.googlevideo.com/videoplayback?expire=1711564085&amp;ei=1BAEZuGMPO6I_9EPoNuG4AU&amp;ip=173.208.43.51&amp;id=o-ACe3YlMH0s5hWM3sZNwMO7E6SSi7KWXzvxroIrLChDAP&amp;itag=22&amp;source=youtube&amp;requiressl=yes&amp;xpc=EgVo2aDSNQ%3D%3D&amp;mh=Rq&amp;mm=31%2C26&amp;mn=sn-ab5l6ndy%2Csn-p5qlsnrl&amp;ms=au%2Conr&amp;mv=m&amp;mvi=3&amp;pl=21&amp;initcwndbps=5968750&amp;vprv=1&amp;svpuc=1&amp;mime=video%2Fmp4&amp;cnr=14&amp;ratebypass=yes&amp;dur=931.909&amp;lmt=1711494322053913&amp;mt=1711542058&amp;fvip=3&amp;fexp=51141541&amp;c=ANDROID&amp;txp=5432434&amp;sparams=expire%2Cei%2Cip%2Cid%2Citag%2Csource%2Crequiressl%2Cxpc%2Cvprv%2Csvpuc%2Cmime%2Ccnr%2Cratebypass%2Cdur%2Clmt&amp;sig=AJfQdSswRgIhAIABmyN5nPz1RTWbPILfb1LF0q8KT4mEy1pgVZ3z0ZnMAiEAx6q7Dgu-B14NfhEvDznd1jS9H22UlIh0UkmC09a57sI%3D&amp;lsparams=mh%2Cmm%2Cmn%2Cms%2Cmv%2Cmvi%2Cpl%2Cinitcwndbps&amp;lsig=ALClDIEwRAIgLhxK9kuJOlhvc8fHjACJq_4q6EUZ9VR4HEVbItYrm7MCICIMSDX4j1_rfgLif1-FBeTb226ThThYwcx6rlAjsG_g&amp;title=這">
        
        
        <button class="flex items-center gap-2">
aaaa                
        </button></a>
</body>
</html>

发现后面加了title 参数就可以下载。具体原因不明，但是解决了一个困扰俩天的问题。先记录一下。

如果有用记得点赞哈。老铁们

下载自己喜欢的小电影可方便了。哈哈haha