大家做项目的时候很多时候会碰到点击下载这个交互，我最近做一个项目的时候也碰到了；

<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

这两个地方可以是自定义，但是一定要能匹配

点我查看demo