大家做项目的时候很多时候会碰到点击下载这个交互，我最近做一个项目的时候也碰到了；
<a
href='wwwhttp://img2.imgtn.bdimg.com/it/u=4135158290,2541209692&fm=27&gp=0.jpg'
download='图片1'
>点击下载</a>
我做点击的时候就是用的这个，其实目前来说点击下载都是利用<a>标签的download 属性；
但是当我按照这样写完去尝试点击下载的时候，发现居然是浏览器打开图片了，而不是下载，这是为什么呢？
image.png
原来<a> 标签的download 只有满足同源的时候才能生效；
什么是同源
image.png
既然这样，难道我们就要把所有的静态文件都要放在服务器上，这显然是不合理的，那我们怎么来解决这个问题呢？
既要使用第三方的服务，又能满足同源？
这里我最先想到的是nginx的反向代理
现在我们来尝试实现
第一步：修改前端代码
<img src={"/download/it/u=4135158290,2541209692&fm=27&gp=0.jpg"} />
<a
href={
"http://img2.imgtn.bdimg.com/it/u=4135158290,2541209692&fm=27&gp=0.jpg"
}
download="图片"
>
点我下载(直接通过百度图库的地址下载)
</a>
<a
href={"/download/it/u=4135158290,2541209692&fm=27&gp=0.jpg"}
download="图片"
>
点我下载(通过自己nginx反向代理下载)
</a>
这里找的一个百度的图片地址，分别用两种方式来做的这个点击下载
第二步：修改nginx的配置文件(默认的地址是 /etc/nginx/nginx.conf)
location /download {
proxy_pass http://img2.imgtn.bdimg.com/;
}
然后重启nginx 就可以了
nginx -s reload
注意⚠️
![]()
image.png
image.png
image.png
这两个地方可以是自定义，但是一定要能匹配
