跨域下载的解决办法

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

<a       
  href='wwwhttp://img2.imgtn.bdimg.com/it/u=4135158290,2541209692&fm=27&gp=0.jpg'
  download='图片1'
>点击下载</a>

我做点击的时候就是用的这个,其实目前来说点击下载都是利用标签的download 属性;

但是当我按照这样写完去尝试点击下载的时候,发现居然是浏览器打开图片了,而不是下载,这是为什么呢?
image.png
原来
标签的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