当前位置:首页 » 《资源分享》 » 正文

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

27 人参与  2024年12月04日 08:01  分类 : 《资源分享》  评论

点击全文阅读


首先配置 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.widthcanvas.height = image.heightvar 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;        }

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


点击全文阅读


本文链接:http://m.zhangshiyu.com/post/196282.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

最新文章

  • 女儿要给我养老,我却反手把她告上法庭每日分享_林梦王浩养老一口气完结_小说后续在线阅读_无删减免费完结_
  • 闻妻有两意(林鹿小柿子)_闻妻有两意
  • 我的死党是刘秀?这皇位我不篡了(李哲王莽)全书免费_(李哲王莽)我的死党是刘秀?这皇位我不篡了后续(李哲王莽)
  • 逃荒路末世女王带着空间养儿女(周铁山王寡妇阿蛮)_逃荒路末世女王带着空间养儿女(周铁山王寡妇阿蛮)
  • 霍远凡肖灿续集(霍远凡肖灿)章节前文+全书阅读(丈夫逼我流产,我以死谢罪)最新连载
  • 老公给我13.14亲密付,我堕胎再婚后他悔疯了每日分享_苏暖顾川林晚晚超长版_小说后续在线阅读_无删减免费完结_
  • (白瑶,李玄胤,冰冷)白瑶,李玄胤,冰冷小说(九尾渡红尘)无套路无弹窗全部章节列表
  • (此去经年无故人)南初陆南城:结局+番外精品选集起点章节+阅读即将发布预订
  • 沈凝夏叶晚怡附加完整在线阅读(归雁不栖故人枝)最近更新列表
  • 剧情人物是时初,白浩雄的玄幻言情小说《召诸神,踏万界,天命帝女逆乾坤》,由网络作家&ldquo;海鸥&rdquo;所著,情节扣人心弦,本站TXT全本,欢迎阅读!本书共计381345字,185章节,:结局+番外免费品鉴:结局+番外评价五颗星
  • 凤青禾,江明远,***枢小说(别人修仙我捡漏,卷王们破防了)最近更新(凤青禾,江明远,***枢)整本无套路阅读
  • 薛梨小说无删减+后续(曾经亲情似草芥)畅享阅读

    关于我们 | 我要投稿 | 免责申明

    Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1