vue实现下载图片跨域问题

下载图片对应js代码

	function down(){
		downloadByBlob(url,'测试.jpg')
	}
	function downloadByBlob(url,name) {
	    let image = new Image()
	    image.setAttribute('crossOrigin', 'anonymous')
	    image.src = url
	    image.onload = () => {
	      let canvas = document.createElement('canvas')
	      canvas.width = image.width
	      canvas.height = image.height
	      let ctx = canvas.getContext('2d')
	      ctx.drawImage(image, 0, 0, image.width, image.height)
	      canvas.toBlob((blob) => {
	        let url = URL.createObjectURL(blob)
	        download(url,name)
	        // 用完释放URL对象
	        URL.revokeObjectURL(url)
	      })
	    }
	  }
	  function download(href, name) {
	    let eleLink = document.createElement('a')
	    eleLink.download = name
	    eleLink.href = href
	    eleLink.click()
	    eleLink.remove()
	  }

一般都会存在跨域问题
配置跨域代理，在项目根目录下创建vue.config.js写进去就行

module.exports = {
    devServer:{
        disableHostCheck: true, // 让vue不强制要求使用host来访问
        host:'localhost',
        port:8080,
        proxy:{
                "/api":{//使用的时候直接 /api/路径，代理服务器会自动检测出/api开头的，并实现代理
                    target:"http://localhost:8000",
                    ws:true,
                    changeOrigin:true,
                    pathRewrite:{
                        "^/api":""
                    }
                }
                 }
    },
    productionSourceMap:true,
    chainWebpack:(config)=>{
        config.plugins.delete('prefetch');
    }
}