vue图片跨域问题的解决
前后端分离开发中,本地域名是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
上一篇: 【PAT Basic Level】1051 复数乘法
下一篇: 爆囧,把你笑成眯眯眼