vue中下载图片跨域

最新推荐文章于 2025-06-01 01:45:00 发布

原创最新推荐文章于 2025-06-01 01:45:00 发布 · 1.2k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

本文介绍了如何在Vue项目中配置跨域以处理前端上传到OBS的图片请求，包括在vue.config.js中设置代理，以及使用axios获取和下载图片的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先在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);
      })
    }