根据URL下载文件的问题

Question

后台返回了这样一个视频链接地址 这个链接地址是第三方的 不是自己服务器上的 现在我想通过前端把这个视频下载下来 这两天试了很多办法 都是在新的窗口播放视频而不是下载视频
https://v3-dy.ixigua.com/ef988cc8d3c171dc081bc918e70f03d0/5cda938c/video/m/2201c11340cdefd4e7c8f70684eac3f30821161de8ac0000a1dd2664d0bc/?rc=M2ttczl5eXR3bTMzZGkzM0ApQHRAbzQ5NzczNjU0NDw6Ojc4PDNAKXUpQGczdSlAZjN2KUBmbGRqZXpoaGRmOzRAby02cmRxXzEtXy0tLi0wc3MtbyNvIzQyLjYxLTItLTItLi4tLi9pOmIwcCM6YS1xIzpgLW8jbWwrYitqdDojLy5e.mp4
给a标签download这种方式也试了 配置nginx强制下载也试了 都不行

下面这种方式我在站内搜到的 试了一下还是在新窗口打开 而不是下载

const aLink = document.createElement('a');
const evt = document.createEvent('MouseEvents');
evt.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
aLink.download = fileName;
aLink.href = url;
aLink.dispatchEvent(evt)

是不是通过纯前端的方式没法办到？
前后端是分离的 我现在用的方式是后台先把文件下载到服务器然后再给前端文件路径来下载 感觉这样很麻烦 我想问一下后台应该下载文件吗？这样的话还要去删除服务器上的这些文件 还是后台直接获取第三方远程视频的文件流或base64然后返回给前端？这样快还是下载文件快？不知道大家有没有别的好办法呢？

Answer 1

确实需要在HTTP Header上做文章，你要提供Content-Type和Content-Disposition这两个header。

如：

Content-Type: video/mp4
Content-Disposition: attachment; filename="Video.mp4"

但是你要用自己的服务器代理这个实在太费流量了，速度也不一定有保证。base64更不用说，还费处理器（计算能力）。

如果你没法控制视频文件的header，那你只能在链接旁加个说明，让用户右键下载了。（其实在网页里播放也不是什么大问题，可能用户还更喜欢这种方式，你可以附加说明“左键打开、右键另存为下载”）。

补充一点，a元素的download属性受同源策略影响，不能跨域下载，所以你使用无效。