vue 前端使用fetch实现下载文件跨域

首先配置vite.config.js

复制代码
export default defineConfig({
  plugins: [vue(),
 ],
   resolve: {
   	alias: {
   		'@': '/src', // 根据你的项目结构进行设置
   	},
   },
  server: {
      proxy: {
        '/image-proxy': {
          target: 'https://你得代理服务器',
          changeOrigin: true,
          rewrite: path => path.replace(/^/image-proxy/, ''), // 确保路径重写正确
        },
      },
    },
 
})

然后使用代码

复制代码
export function downloadImage(src, name) {
	// 参数src为图片地址,name为下载时图片的名称
	src = src.replace(/^https?://[^/]+/, '/image-proxy');
	var image = new Image()
	// 解决跨域 Canvas 污染问题
	image.setAttribute("crossOrigin", "anonymous")
	image.onload = function() {
		var canvas = document.createElement("canvas")
		canvas.width = image.width
		canvas.height = image.height

		var context = canvas.getContext("2d")
		context.drawImage(image, 0, 0, image.width, image.height)
		var url = canvas.toDataURL("image/png")

		// 生成一个a元素
		var a = document.createElement("a")
		// 创建一个单击事件
		var event = new MouseEvent("click")

		// 将a的download属性设置为我们想要下载的图片名称,若name不存在则使用'下载图片名称'作为默认名称
		a.download = name || "图片"
		// 将生成的URL设置为a.href属性
		a.href = url

		// 触发a的单击事件
		a.dispatchEvent(event)
	}
	image.src = src
}

使用

复制代码
downloadImage("图片Url","文件名.jpg")

以上只是调试的时候的代理设置,但是到你打包之后这样设置的就会失效,需要使用nginx设置代理,以下是配置,希望能帮到你,

我也是新手,也遇到打包之后访问报错,有百度了一会,需要设置ngxin的代理,确实这样的文章太少,都是说这样然后那样,试了都不可以,只能慢慢试,所以记录下。

复制代码
		location /image-proxy/ {
            # 假设图片服务器运行在 http://image-server.com:8080
            proxy_pass 你得图片地址比如 https://baidu,con;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;
			
			proxy_ssl_verify off;
        }

亲测有效,记录下,希望能帮到你

相关推荐
n12352351 分钟前
Chrome 插件开发入门指南:从基础到实践
前端·chrome
前端 贾公子7 分钟前
ElementUI 中 validateField 对部分表单字段数组进行校验时多次回调问题
前端·javascript·elementui
棒棒的唐8 分钟前
vue2 elementUI 登录页面实现回车提交登录的方法
前端·javascript·elementui
前端小万11 分钟前
一次紧急的现场性能问题排查
前端·性能优化
zhangzuying102612 分钟前
基于Vue3 +ElementuiPlus + Dexie.js自研的浏览器插件新建标签页tab
vue.js·typescript·echarts
lichong95117 分钟前
【混合开发】vue+Android、iPhone、鸿蒙、win、macOS、Linux之video 的各种状态和生命周期调用说明
android·vue.js·macos
excel27 分钟前
为什么相同卷积代码在不同层学到的特征完全不同——基于 tfjs-node 猫图像识别示例的逐层解析
前端
知识分享小能手27 分钟前
React学习教程,从入门到精通,React 使用属性(Props)创建组件语法知识点与案例详解(15)
前端·javascript·vue.js·学习·react.js·前端框架·vue
用户214118326360230 分钟前
dify案例分享-免费玩转即梦 4.0 多图生成!Dify 工作流从搭建到使用全攻略,附案例效果
前端
CodeSheep30 分钟前
稚晖君又开始摇人了,有点猛啊!
前端·后端·程序员