devServer.proxy 配置本地代理、测试环境配置nginx解决canvas图片跨域问题

proxy本地代理访问图片解决跨域问题

devServer.proxy代理

devServer: {
    port: 8001,
    proxy: {
      '/busy': {
        target: 'http://beijing-image.oss-cn-beijing.aliyuncs.com/',
        changeOrigin: true,
        pathRewrite: {
          '^/busy': '/busy'
        }
      }
}

接口访问图片

getImage(url) {
	return axios({ method: 'get', url,responseType: 'blob'})
}
// 接口调用
let url = this.specialImg.split('.com')[1];
getImage(url).then(res => {
	// 将blob转为链接
	const myBlob = new Blob([res.data], { type: "image/jpeg" });
    let src = window.URL.createObjectURL(myBlob)
})

canvas绘制

let image = new Image();
image.crossOrigin = 'anonymous';
image.style = `width: ${w}px;height:${h}px`;
let imageData = {};
image.onload = function() {
  ctx.drawImage(image, 0, 0);   
}
image.src = src;

测试环境接口访问配合nginx配置转发到不同的图片服务器

	nginx通过$arg_url获取接口参数url
	proxy_pass 转到到url

let http = this.specialImg.match(/http[^]+com/)[0]
let url = this.specialImg.split('com/')[1] + '?url=' + http
getImage(url).then(res => {
	// 将blob转为链接
	const myBlob = new Blob([res.data], { type: "image/jpeg" });
    let src = window.URL.createObjectURL(myBlob)
})