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 = objectUrllink.setAttribute('download', fileName)document.body.appendChild(link)link.click()// 释放内存window.URL.revokeObjectURL(link.href)loading.close()}).catch(response => {loading.close()})}

 

 

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

web安全学习笔记【22】——文件上传(1)

WEB攻防-PHP应用&文件上传&函数缺陷&条件竞争&二次渲染&黑白名单&JS绕过 演示案例: PHP-原生态-文件上传-前后端验证PHP-原生态-文件上传-类型文件头验证PHP-原生态-文件上传-后缀黑白名单验证PHP-原生态-文件上传-解析配置&二次渲染…

XUbuntu22.04之Typora添加水印并输出pdf文件(二百二十七)

简介: CSDN博客专家,专注Android/Linux系统,分享多mic语音方案、音视频、编解码等技术,与大家一起成长! 优质专栏:Audio工程师进阶系列【原创干货持续更新中……】🚀 优质专栏:多媒体系统工程师系列【原创干货持续更新中……】🚀 优质视频课程:AAOS车载系统+AOSP…

功能测试_验证某城市电话号码的正确性

案例:验证某城市电话号码的正确性 功能测试_等价类设计用例: 步骤: 1:明确需求:电话号码是否正确 2:划分等价类:有效等价类、有效取值、无效等价类、无效取值 3:提取数据编写用例:用例编号…

STM32F407+FreeRTOS+LWIP UDP组播

开发环境介绍: MCU:STM32F407ZET6 网卡:LAN8720A LWIP版本:V1.1.0 FreeRTOS 版本:V10.2.1 LAN8720A硬件原理图: 硬件连接说明: MII_RX_CLK/RMII_REF_CLK ------>PA1 …

云安全在金融领域的作用是什么?

云安全在金融领域发挥着至关重要的作用,使金融机构能够保护敏感数据、遵守监管要求并推动创新。通过实施强有力的安全措施、利用先进技术并对新出现的威胁保持警惕,金融机构可以保护其数字资产并维持客户的信任。 金融机构面临的挑战 1.缺乏全网数据支撑…

不到6毛钱的I2C总线实时时钟日历芯片LK8563

前言 8563实时时钟芯片,国内外均有多家生产,今推荐一个性价比极高的RTC芯片,LK8563,一片不到6毛钱. 特点 基于32.768kHz晶体的秒,分,小时,星期,天,月和年的计时 带有世…

设计模式学习笔记 - 设计模式与范式 -行为型:7.责任链模式(下):框架中常用的过滤器、拦截器是如何实现的?

概述 上篇文章《6.责任链模式(上):原理与实现》,学习了职责链模式的原理与实现,并且通过一个敏感词过滤框架的例子,展示了职责链模式的设计意图。本质上来说,它跟大部分设计模式一样&#xff0…

Python从0到100(十一):Python字典介绍及运用

前言: 零基础学Python:Python从0到100最新最全教程。 想做这件事情很久了,这次我更新了自己所写过的所有博客,汇集成了Python从0到100,共一百节课,帮助大家一个月时间里从零基础到学习Python基础语法、Pyth…

10 spring-data-redis 中创建的 pipe 和 anon_inode 的 fd 来自于哪里?

前言 本文的问题 主要是 衍生自 spring-boot-acurator 定时检测 redis 集群导致 “IOException: Too many open files“ 对于这里 pipe 的使用, 也是很神奇, 因为 貌似没有用过这类 api 然后 这里调研一下, 然后 追根究底到最终, 是到了 jdk 的 c 代码的调用, 创建的 pipe …

51单片机之LED点阵屏

目录 1.LED点阵屏简介 2.配置LED点阵屏代码 1.LED点阵屏简介 LED点阵屏真的是遍布我们我们生活的每个角落,从街边的流动显示字的招牌到你的液晶显示屏,都是基于点阵屏的原理研究出来的。还有那个世界上最大的球状建筑物:MSG Sphere&#xff…

三极管结构难?——秒了

前边我们已经学完了PN结,二极管,在分析了二极管后,我们对这些东西有了一定深度的了解,但是只给我们一个二极管去研究,这玩意好像真的没啥大用,其实我们追求的是用半导体材料去代替电子管的放大作用&#xf…

网络安全(防火墙,IDS,IPS概述)

问题一:什么是防火墙,IDS,IPS? 防火墙是对IP:port的访问进行限制,对访问端口进行制定的策略去允许开放的访问,将不放开的端口进行拒绝访问,从而达到充当防DDOS的设备。主要是拒绝网络流量,阻断所有不希望出现的流程,禁止数据流量流通,达到安全防护的作用。如将一些恶…

tensorflow.js 使用 opencv.js 将人脸特征点网格绘制与姿态估计线绘制结合起来,以获得更高的帧数

系列文章目录 如何在前端项目中使用opencv.js | opencv.js入门如何使用tensorflow.js实现面部特征点检测tensorflow.js 如何从 public 路径加载人脸特征点检测模型tensorflow.js 如何使用opencv.js通过面部特征点估算脸部姿态并绘制示意图 文章目录 系列文章目录前言一、实现步…

Lecture 2~4 About Filter

文章目录 空间域上的滤波器- 线性滤波器盒状滤波器Box Filter锐化Sharpening相关运算 vs. 卷积运算 Correlation vs. Convolution - 非线性滤波器高斯滤波器Gaussian filter - 实际问题- 纹理texture 频域上的滤波器 滤波的应用- 模板匹配- 图像金字塔 空间域上的滤波器 图像…

Django的中间件

Django的中间件 【一】重点: django中间件是django的门户 请求来的时候需要经过中间件才能到达真正的django后端响应走的时候也需要经过中间件才能发送出去中间件按照顺序依次执行 ​ Django 中间件(Middleware)是 Django 框架提供的一种…

设计模式——代理模式12

代理模式给某对象提供一个代理对象,由代理对象来控制对原对象的引用。该模式经常出现在系统框架或相关组件中,如Spring框架如何解决循环依赖,在Mybatis 定义 Dao 层相关接口 不写实现 如何通过注解或者xml映射到对应到sql语句。下面介绍 静态…

再见 MybatisPlus,阿里推出新 ORM 框架更牛X

最近看到一个 ORM 框架 Fluent Mybatis 挺有意思的,整个设计理念非常符合工程师思维。 我对官方文档的部分内容进行了简单整理,通过这篇文章带你看看这个新晋 ORM 框架。 官方文档:https://gitee.com/fluent-mybatis/fluent-mybatis/wikis 提…

Nginx反向代理与Tomcat实现ssm项目前后端分离部署

Nginx nginx是一款http和支持反向代理的web服务器,以其优越的性能被广泛使用。以下是百度百科的介绍。 Nginx (engine x) 是一个高性能的HTTP和反向代理web服务器,同时也提供了IMAP/POP3/SMTP服务。Nginx是由伊戈尔赛索耶夫为俄罗斯访问量第二的Rambler.…

智慧园区水电能源监控管理系统

随着智慧城市的快速发展,智慧园区作为城市智能化的重要组成部分,其能源监控管理系统显得尤为关键。智慧园区水电能源监控管理系统,是利用先进的信息技术和自动控制技术,对园区内的水电能源使用进行实时监控、管理和优化的综合性智…

美国34401A安捷伦数字万用表

181/2461/8938产品概述: 附加功能: 6 1/2位数分辨率10种测量功能:DC/交流电压、DC/交流电流、2线和4线电阻、二极管、连续性、频率、周期基本精度:0.0035% DC,0.06%交流1000 V最大电压输入,3 A最大电流输入每秒1000次读数512读取记忆 安捷…