vue中使用axios获取不到响应头Content-Disposition的解决办法

项目中,后端返回的文件流;
前端需要拿到响应头里的Content-Disposition字段的值,从中获取文件名
 

在控制台Headers中可以看到相关的字段和文件名,但是在axios里面却获取不到

fb8bf42bc0da41d58dbb3f073c48ee3e.png

如果想要让客户端访问到相关信息,服务器不仅要在heade里添加,还要将它们在 Access-Control-Expose-Headers 里面列出来

response.setHeader("Access-Control-Expose-Headers", "Content-Disposition");
			response.setHeader("Content-Disposition", "attachment; filename=" + downloadName);

这两行代码是Java中用于设置HTTP响应头的,通常在Web开发中,特别是当涉及到文件下载时,会用到这样的设置。

response.setHeader("Access-Control-Expose-Headers", "Content-Disposition");

这行代码设置了Access-Control-Expose-Headers响应头。这个响应头与跨域资源共享(CORS)有关。默认情况下,浏览器不允许跨域请求的JavaScript代码访问某些响应头信息。但是,通过Access-Control-Expose-Headers,服务器可以告诉浏览器哪些额外的头信息可以被JavaScript代码访问。

在这里,服务器告诉浏览器,Content-Disposition这个响应头是可以被JavaScript代码访问的。这通常在你需要在前端处理或检查文件的下载信息时非常有用。
2. response.setHeader("Content-Disposition", "attachment; filename=" + downloadName);

这行代码设置了Content-Disposition响应头。Content-Disposition响应头指示浏览器如何处理响应的内容。当它的值设置为attachment时,它告诉浏览器将响应的内容视为附件,而不是在页面上显示。这通常用于触发文件的下载。

filename参数指定了下载文件的名称。这里,它被设置为downloadName的值,这意味着你可以动态地设置下载文件的名称。

例如,如果downloadName的值是"mydocument.pdf",那么Content-Disposition响应头的值就是"attachment; filename=mydocument.pdf"。当浏览器收到这样的响应头时,它会提示用户下载名为mydocument.pdf的文件。

总的来说,这两行代码的目的是设置响应头,以便浏览器知道响应的内容应该被视为一个文件,并且这个文件应该被下载,而不是在浏览器中显示。同时,它们还确保JavaScript代码可以访问Content-Disposition响应头的信息。

前端代码:

download(form) {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      downloadFile({ id: form.reportId }).then(response => {
        var fileName = ''
          debugger;
        const contentDisposition = response.headers['content-disposition']
        if (contentDisposition) {
    
          fileName = window.decodeURI(response.headers['content-disposition'].split('=')[1], 'UTF-8')
        }
        const blob = new Blob([response.data], {
          type: `application/vnd.openxmlformats-officedocument.spreadsheetml.sheet` // word文档为msword,pdf文档为pdf
        })
        const objectUrl = URL.createObjectURL(blob)
        const link = document.createElement('a')
        link.href = objectUrl
        link.setAttribute('download', fileName)
        document.body.appendChild(link)
        link.click()
        // 释放内存
        window.URL.revokeObjectURL(link.href)
        loading.close()
      }).catch(response => {
        loading.close()
      })
    }

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/544575.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

嵌入式单片机 TTL电平、232电平、485电平的区别和联系

一、简介 TTL、232和485是常见的串口通信标准,它们在电平和通信方式上有所不同, ①一般情况下TTL电平应用于单片机外设,属于MCU/CPU等片外外设; ②232/485电平应用于产品整体对外的接口,一般是片外TTL串口转232/485…

<计算机网络自顶向下> CDN

视频服务挑战 规模性异构性:不同用户有不同的能力(比如有线接入和移动用户;贷款丰富和受限用户)解决方法是:分布式的应用层面的基础设施CDN 多媒体:视频 视频是固定速度显示的一系列图像的序列&#xff…

【ubuntu20.04】安装GeographicLib

下载地址 GeographicLib: Installing GeographicLib 我们是ubuntu20.04 ,所以下载第一个 GeographicLib-2.3.tar.gz 接着跟着官方步骤安装,会出错!!!!马的 官方错误示例:tar xfpz Geographi…

YOLOV5 + 双目相机实现三维测距(新版本)

文章目录 YOLOV5 双目相机实现三维测距(新版本)1. 项目流程2. 测距原理3. 操作步骤和代码解析4. 实时检测5. 训练6. 源码下载 YOLOV5 双目相机实现三维测距(新版本) 本文主要是对此篇文章做一些改进,以及解释读者在…

微软搭建零售新媒体创意工作室大举抢占数字营销广告市场

“微软新零售创意工作室新平台利用生成式人工智能,在几秒钟内轻松定制横幅广告。零售媒体预计到2026年将成为一个价值1000亿美元的行业。” 零售媒体在过去几年中发展迅速。根据eMarketerOpens在新窗口的数据,预计到2024年,仅美国的零售媒体…

基于粒子群优化的配电网重构

一、配电网重构原理 配电网重构是指在满足配电网运行基本约束的前提下,通过改变配电网中一个或多个开关的状态对配电网中一个或多个指标进行优化。通过配电网重构,可以在不增加设备投资的情况下,充分发挥配电系统的潜力,提高系统…

【C语言】每日一题,快速提升(1)!

调整数组使奇数全部都位于偶数前面 题目: 输入一个整数数组,实现一个函数 来调整该数组中数字的顺序使得数组中所有的奇数位于数组的前半部分 所有偶数位于数组的后半部分 解题思路: 给定两个下标left和right,left放在数组的起始…

【Web】VS Code 插件及快捷键

专栏文章索引:Web 有问题可私聊:QQ:3375119339 目录 一、安装步骤 二、插件 1.Chinese (Simplified) (简体中文) 2.open in browser 3.vscode-icons 4.Live Server 5.Live Server Preview 6.翻译(英汉词典) 三、快捷键 1.缩放代码…

Vivado ILA Capture Control 模式与 Advanced Trigger的功能使用以及TSM(触发状态机)的编写

文章目录 一、前言二、ILA的基本功能使用以及局限性2.1 ILA的调用2.2 ILA波形窗口观察2.3 ILA基本功能的局限性:如何观测低频的数据? 二、Capture Control 功能介绍三、Advanced Trigger功能以及TSM编写3.1 触发状态机的写法3.2 设置Advanced Trigger3.3…

MYSQL中的ER图

1.首先学习如何设计数据,在此之前我们先学会画出我们的规划图 利用Axure RP 9 然后进行以后的操作。其实非常简单看看就会

NODE MCU (ESP8285-ESP8266)用Arduino lDE 2.3.2烧录系统后串口监控不打印问题

问题: Arduino lDE 2.3.2,集合DOIT ESP-Mx DevKit板子,烧录代码后,串口监视器 打印不出来调试数据 分析: Arduino lDE 2.3.2工具提示,不支持调试 板载flash按钮无需按下,即可烧录系统,由于烧录和调试共用串口,所以怀疑是Arduino lDE 2.3.2在烧录时设置了串口的配置…

Hello 算法10:搜索

https://www.hello-algo.com/chapter_searching/binary_search/ 二分查找法 给定一个长度为 n的数组 nums ,元素按从小到大的顺序排列,数组不包含重复元素。请查找并返回元素 target 在该数组中的索引。若数组不包含该元素,则返回 -1 。 # 首…

Ubuntu 22.04 开机自动挂载webdav - 设置开机自启脚本 - 解决坚果云webdav无写入权限

效果图: 前言: 1)亲测/etc/fstab的办法没有成功自动挂载,换成传统的rc.local可以解决; 2)rc-local.service是系统自带的一个开机自启服务,但是在 ubuntu 20.04 上,该服务默认没有开…

基于物理原理的p-GaN HEMT动态导通电阻SPICE建模

来源:Physics-Based SPICE Modeling of Dynamic ON-State Resistance of p-GaN HEMTs(TPEL 23年) 摘要 这封快报介绍了一种新型基于物理学原理的SPICE建模方法,专门针对氮化镓基p型门极高电子迁移率晶体管(p-GaN HEM…

route路由命令、ip route命令、default默认路由(0.0.0.0 )

文章目录 概述3. route语法3.1 查看路由表3.1 参数解释 3.2 添加路由记录3.2.1 添加到达单个目标主机的路由3.2.2 添加到达目标网络的路由3.2.3 添加默认路由 3.3 删除路由记录 4. ip route4.1 查看路由4.1.1 不带条件4.1.2 带条件4.1.3 字段解释4.1.3 字段解释 4.2 添加路由4.…

基于Springboot+Vue的Java项目-高校心理教育辅导系统开发实战(附演示视频+源码+LW)

大家好!我是程序员一帆,感谢您阅读本文,欢迎一键三连哦。 💞当前专栏:Java毕业设计 精彩专栏推荐👇🏻👇🏻👇🏻 🎀 Python毕业设计 &am…

发布 Chrome/Edge浏览器extension扩展到应用商店

Chrom Extension发布流程 创建和发布自定义 Chrome 应用和扩展程序:https://support.google.com/chrome/a/answer/2714278?hlzh-Hans 在 Chrome 应用商店中发布:https://developer.chrome.com/docs/webstore/publish?hlzh-cn 注册开发者帐号&#…

Eclipse+Java+Swing实现图书信息管理系统-TXT存储信息

一、系统介绍 1.开发环境 操作系统:Win10 开发工具 :Eclipse2021 JDK版本:jdk1.8 存储方式:Txt文件存储 2.技术选型 JavaSwingTxt 3.功能模块 4.工程结构 5.系统功能 1.系统登录 管理员可以登录系统 2.查看图书 管理员…

软件无线电安全之HackRF One初探

HackRF介绍 HackRF是一款开源软件无线电(SDR)平台,由Great Scott Gadgets公司推出。它具有广泛的频率覆盖范围,从1 MHz到6 GHz,支持大部分常见的无线通信频段。采用软件定义无线电技术,HackRF提供了自定义…

vue快速入门(二十四)输入停顿再进行响应

注释很详细&#xff0c;直接上代码 上一篇 新增内容 使用侦听器监视数据变化情况使用clearTimeout与定时器实现停顿一段时间再操作内容 源码 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"view…