当前位置： 移动技术网 > IT编程>脚本编程>vue.js > vue图片跨域问题的解决

vue图片跨域问题的解决

2020年07月08日  | 移动技术网IT编程  | 我要评论

前后端分离开发中，本地域名是localhos，图片请求的地址不是localhost，这个时候下载图片的时候就会存在跨域问题。

vue中访问后台接口是使用的proxy反向代理的形式从而解决了接口跨域的问题，是否图片也可以使用这中proxy反向代理的形式从而解决图片跨域问题呢？

答案是可以的。

网上有很多“解决图片跨越的方案”，但是当我拿那些代码进行测试的时候，发现:网上的图片解决图片跨域问题的方案没有任何作用

下面是我按照网上给出的方案测试的结果:

 生活还是要继续，代码还是要接着往下写。

同事给出的建议是，使用proxy反向代理的方案来解决图片跨域的问题。

1，配置一个反向代理的域名

在config/index.js 中搜索proxyTable，配置一个要代理的图片的域名

proxyTable: {
	'/upload': {
		//代理图片下载的接口
		target: 'http://www.gaokai.fun/',
		changeOrigin: true,
		secure: false, // 设置支持https协议的代理
		pathRewrite: {
		    '^/upload': ''
	    }
	}
},

2,axios请求图片地址

 

export const getImage=(url)=>{ return axios({ method:'get',url:'/upload'+ url,responseType: 'blob'})};
//此接口的意思是通过get方式请求图片,图片类型是blob

3，在下载页面输出请求的图片

upload(){
		let url = this.goodsList.shoutaourl.split('upload')[1];
			getImage(url)
			.then(res =>{
				console.log(res.data);
					
		})
				
},

你把请求的数据打印一下，发现是这样子

 但是请求的数据你看一下，图片已经出来了，但是你拿不到。

为什么？

因为图片在传输过程中，会以二进制的方式进行传输？

为什么以二进制的方式进行传输，而不是直接传输？

因为：1,二进制传输比较快

           2，防止编码格式不对，导致乱码

好了，我们明白了这些问题。

接下来，有两个问题，我们请求到的到底是啥？

如何将请求到的图片下载下来?

别急。我们请求到的数据格式是blob，我们需要把blob类型图片通过创建a链接的形式，将图片下载下来。

4，在公共函数库添加下载函数

const downloadIamge = function(imgsrc, name) {
    const fileName= `${name}.jpg`;
    const myBlob = new Blob([imgsrc], { type: "image/jpeg" });
    const link = document.createElement("a");
    link.href = URL.createObjectURL(myBlob);
    link.download = fileName;
    link.click();
    link.remove();
    URL.revokeObjectURL(link.href);
}

5，在页面中引入下载函数并且调用

公共函数库导出该函数

在页面中引入下载函数

 在methods的方法中调用

upload(){
	
		let url = 'static/0001.jpg';
		getImage(url)
		.then(res =>{
			downloadIamge(res.data,'手淘二维码');
		})
},

好了，下载大功告成，我们看一下效果

文件已经下载下来了。 

本文地址：https://blog.csdn.net/qq_37655448/article/details/107044588

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网