前後端分離開發中，本地域名是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,'手淘二維碼');
})
},
好了，下載大功告成，我們看一下效果
文件已經下載下來了。