跨域文件下载-前端实现

需求: 一个集成项目,从第三方平台拿到了文件地址:http://aa/videoname.mp4,前端做个点击下载的功能

　　使用 a标签  <a href=' http://aa/videoname.mp4'>下载</a> 来做,  直接点击浏览器会播放此视频文件,并非所期望的下载文件.

　　原因:  a标签的默认行为是链接跳转进行预览，而针对浏览无法预览的文件，也可达到下载的效果. 显然mp4是被浏览器识别了.

 　　a标签加上downlaod属性后(download=下载时显示的文件名)，就可完成对href属性链接文件的下载，但仅是限于同源文件，如果是非同源，download属性会失效。我们本地开发时,web页面地址是localhost:8080, 即便是部署到生产环境也只是http://bb, 显然与文件地址http://aa/videoname.mp4不同源.

　　使用js直接请求 http://aa/videoname.mp4进行请求到Blob再转换成本地url进行下载

    const a = document.createElement("a");
    a.download = fileName;
    a.href = window.URL.createObjectURL(blob)
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a)

     上面这种下载方法相当于下载了两遍, 非常慢,体验极不友好.　　

　　解决方案: 使用前端项目工程的代理功能,达到同源效果

 　<a href=' http://aa/videoname.mp4'>

　　替换为

　　const fileUrl = 'http://aa/videoname.mp4'

　　const downloadUrl ='/download'.concat(fileUrl) .substr(fileUrl .indexOf('/', 8)))

　  <a href={downloadUrl} download={record.name}>下载</a>

　

　　且在代理文件中,将带有 /download 的请求拦截,替换成真正的请求域名, 如我用的是umijs  代理配置文件/config/proxy.js:

  '/download': {
      target: "http://aa",
      changeOrigin: true,
      pathRewrite: {
        '^/download': '',
      },
      logLevel: DEV_PROXY_LOG_LEVEL,
    },

　　注: 生产环境下, 这种代理是不起作用的,可以用nginx进行代理.