vue中下载图片跨域

首先在vue.config.js中配置跨域

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

由于项目中的请求是走的其他地址， 图片是前端上传到obs上的，所以需要配两个跨域。

写请求图片方法

/**
 * 
 * @param url 图片地址
 */
export async function getImage(url: string) {
  const { data } = await Axios({
    method: "GET",
    url: "/upload" + url,
    responseType: "blob"
  })

  return data;
}

下载图片方法

  down: (file: IfFileList) => {
      getImage(file.url).then(res => {
        const fileName = file.fileName;
        const myBlob = new Blob([res], { type: "image/jpeg" });
        const link = document.createElement("a");
        link.href = URL.createObjectURL(myBlob);
        link.download = fileName;
        link.click();
        link.remove();
        URL.revokeObjectURL(link.href);
      })
    }