前言：一个简单的下载需求，引发的深思（血案）！ 预知详情，请您往⬇️看。
方案一：(前端实现)
大体上我们第一个想到的是利用a标签的download属性，此种方案适用于下载同源资源，对于跨域资源会自动访问地址，浏览器不能读取的资源无同源限制均会自动下载（zip、docx...）
{/* 同源图片/视频 */}
{/* <p><a href={img} download="demo.png">点击下载png</a></p> */}
{/* <p><a href={video} download="demo.mp4">点击下载mp4</a></p> */}
{/* 非同源图片/视频 */}
{/* <p><a href='https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2534506313,1688529724&fm=26&gp=0.jpg'download="test.js">点击下载png</a></p> */}
{/* <p><a href='http://localhost:3000/files/a.mp4'download="a.mp4">点击下载mp4</a></p> */}
{/* 非同源其他文件 */}
{/* <p><a href='http://localhost:3000/files/a.txt'download="a.txt">点击下载txt</a></p> */}
{/* <p><a href='http://localhost:3000/files/a.zip'download="a.zip">点击下载zip</a></p> */}方案二：(后台实现)
后台在返回资源的时候设置响应头即可。
解决方案有两种：
1、设置类型
res.setHeader("Content-type", "application/octet-stream")
2、设置回复的内容的展示形式
res.setHeader("Content-Disposition", "attachment; filename="+fileName)
attachment为附件模式
filename的值预填为下载后的文件名
扩展：下载非同源图片(无需后台支撑)
使用drawImage接口绘制图片，使用toDataURL将canvas对象转化为base64地址
const canvas = document.createElement('canvas')
const ctx = canvas.getContext('2d')
const img = document.querySelector('.img')
ctx.width = img.width
ctx.heigth = img.height
ctx.drawImage(img, 0, 0, ctx.width, ctx.height)
const url = canvas.toDataURL()
const a = document.createElement('a')
a.download = 'demo.png'
a.href = url
a.click()网上还有关于使用ifream，form，window.open等方法下载文件从根本上是离不开同源限制和后台支撑。唯独浏览器无法读取解析的静态资源会无视同源限制会自动下载！！！
示例代码： 点击跳转
如果对您有细微的帮助，记得点个赞哦， 点波关注就更好了， 如果再能指导一二那不得不说一句： 善，大善！
