欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vue图片跨域问题的解决

程序员文章站 2022-03-28 19:10:05
前后端分离开发中,本地域名是localhos,图片请求的地址不是localhost,这个时候下载图片的时候就会存在跨域问题。vue中访问后台接口是使用的proxy反向代理的形式从而解决了接口跨域的问题,是否图片也可以使用这中proxy反向代理的形式从而解决图片跨域问题呢?答案是可以的。网上有很多“解决图片跨越的方案”,但是当我拿那些代码进行测试的时候,发现:网上的图片解决图片跨域问题的方案没有任何作用下面是我按照网上给出的方案测试的结果:生活还是要继续,代码还是要接着往下写。....

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

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

答案是可以的。

vue图片跨域问题的解决

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

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

vue图片跨域问题的解决

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

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

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

vue图片跨域问题的解决

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

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

2,axios请求图片地址

vue图片跨域问题的解决

 

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);
					
		})
				
},

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

vue图片跨域问题的解决

vue图片跨域问题的解决

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

为什么?

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

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

因为: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,在页面中引入下载函数并且调用

公共函数库导出该函数

vue图片跨域问题的解决

在页面中引入下载函数

vue图片跨域问题的解决

 在methods的方法中调用

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

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

vue图片跨域问题的解决

文件已经下载下来了。 

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