js解决跨域下载文件

方法1：
后端返回一个url前端怎么把文件下载下来
最近做的项目有一个用腾讯云上传音视频的功能，在后台管理里面需要将音视频下载下来，后端是直接返回腾讯云视频url地址的，

    // 点击下载文件
    downloadFile(file) {
        // 音视频下载
        if (file.url.indexOf('http://') >=0 || file.url.indexOf('https://') >= 0) {
          let handleUrl = ''
          // 本站用的https:// 接口返回的http，这样可能会跨域导致无法下载，这里手动将字符串的http转一下
          if (location.protocol === 'https:') {
            handleUrl = file.url.replace('http://', 'https://')
          } else {
            handleUrl = file.url
          }
          const loading = this.$loading({
            lock: true,
            text: '正在下载中...',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          })
          var xhr = new XMLHttpRequest()
          xhr.open("GET", handleUrl, true)
          xhr.responseType = 'blob'
          xhr.onload = function(e){
            if (e.target.readyState === 4 && e.target.status === 200) {
                let blob = this.response
                // 转换一个blob链接
                let u = window.URL.createObjectURL(new Blob([blob]))
                let a = document.createElement('a');
                a.download = file.fileName
                a.href = u
                a.style.display = 'none'
                document.body.appendChild(a)
                a.click()
                a.remove()
                loading.close()
            }
          }
          xhr.send()
        }
    },

原文链接：https://blog.csdn.net/Blues_jim/article/details/109285111

方法2

之前用的是a标签的方式，同源是没有问题的，但一跨域就不行了，试了其它方法，不是报跨域错误，就是在当前页面打开文件，体验相当不好。

data = data.replace(/\\/g, '/');
var aLink = document.createElement('a');
aLink.download = data.split('/')[data.split('/').length - 1];
aLink.href = data;
aLink.click();

最终解决方案：

 /**
     * 获取页面文件名
     * @param url 文件url
     */
    function downloadUrlFile(url) {
      url= url.replace(/\\/g, '/');
      const xhr = new XMLHttpRequest();
      xhr.open('GET', url, true);
      xhr.responseType = 'blob';
      //xhr.setRequestHeader('Authorization', 'Basic a2VybWl0Omtlcm1pdA==');
      xhr.onload = () => {
        if (xhr.status === 200) {
          // 获取文件blob数据并保存
          var fileName = getFileName(url);
          saveAs(xhr.response, fileName);
        }
      };

      xhr.send();
    }
    
    /**
     * URL方式保存文件到本地
     * @param data 文件的blob数据
     * @param name 文件名
     */
    function saveAs(data, name) {
        var urlObject = window.URL || window.webkitURL || window;
        var export_blob = new Blob([data]);
        var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a')
        save_link.href = urlObject.createObjectURL(export_blob);
        save_link.download = name;
        save_link.click();
    }
    
    /**
     * 根据文件url获取文件名
     * @param url 文件url
     */
    function getFileName(url) 
    {
        var num = url.lastIndexOf('/')+1
        var fileName = url.substring(num)
        //把参数和文件名分割开
        fileName = decodeURI(fileName.split("?")[0]);
        return fileName;
    }

原文地址：https://www.cnblogs.com/xtjatswc/p/11345584.html