跨域文件下载-前端实现

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

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

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

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

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

1     const a = document.createElement("a");
2     a.download = fileName;
3     a.href = window.URL.createObjectURL(blob)
4     document.body.appendChild(a);
5     a.click();
6     document.body.removeChild(a)

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

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

　<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进行代理.

跨域文件下载-前端实现

原文：https://www.cnblogs.com/huic/p/14007250.html