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,一经查实,立即删除!

相关文章

xilinx fpga 程序固化(含sdk)

一、前言 xilinx 旗下的产品主要有包含有处理器的SOC系列,也有只有纯逻辑的fpga,两者的程序固化的方法并不相同,本文介绍含有处理器或者microblaze中有程序的固化。 二、固化流程 2.1 在sdk中固化 SDK中选择Xilinx Tools–Program FPGA&a…

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

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

Android Camera API 1打开相机失败

目前Camera API 1使用的比较少了,一般代码如下。遇到的问题是camera1接口无法打开相机,cam2接口打开正常。最后排查结果是 sensor的 frameRate 配置不对。 Camera camera;CameraPreview mPreview;SuppressLint("MissingPermission")Overridepr…

React 中实现组合键操作的三种方法

在 React 中实现组合键可以使用以下方式: 使用 KeyboardEvent.getModifierState() 方法: import React, { useState, useCallback } from react;const MyComponent () > {const [isCtrlShiftPressed, setIsCtrlShiftPressed] useState(false);const handleKeyDown useC…

010 spring整合mybatis(事务)(xml)

文章目录 pom.xmlProductsMapper.javaProductsServiceImpl.javaProductsService.javaProductsMapper.xmlApplicationContext.xmldb.propertiesmybatis-config.xmlProductsServiceImplTest.java pom.xml <?xml version"1.0" encoding"UTF-8"?> <…

SpringBoot怎么使用Validation校验参数

1. Validation 介绍 Validation 是用于检查程序代码中参数的有效性的框架&#xff0c;作为 Spring 框架中的一个参数校验工具&#xff0c;集成在 spring-context 包中。 1.1 Validation 注解 Validation 包含了众多的注解来帮助对Java程序不同类型的参数进行校验&#xff0c;校…

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

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

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

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

STM32F407+FreeRTOS+LWIP UDP组播

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

python语言之round(num, n)小数四舍五入

文章目录 python round(num, n)小数四舍五入python round(num, n)基础银行家舍入&#xff08;Bankers Rounding&#xff09;利息被银行四舍五入后&#xff0c;你到底是赚了还是亏了&#xff1f; python小数位的使用decimal模块四舍五入(解决round 遇5不进) python round(num, n…

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

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

GPT与R语言回归模型(lmglm)、混合效应模型、多元统计分析

自2022年GPT&#xff08;Generative Pre-trained Transformer&#xff09;大语言模型的发布以来&#xff0c;它以其卓越的自然语言处理能力和广泛的应用潜力&#xff0c;在学术界和工业界掀起了一场革命。在短短一年多的时间里&#xff0c;GPT已经在多个领域展现出其独特的价值…

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

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

前端:常用的获取元素位置与元素尺寸的属性与方法

属性/方法描述clientWidth返回元素内容区的宽度&#xff08;不包括滚动条、边框和外边距&#xff09;。对于box-sizing: border-box的元素&#xff0c;包含内边距。clientHeight返回元素内容区的高度&#xff08;不包括滚动条、边框和外边距&#xff09;。对于box-sizing: bord…

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

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

批量删除指定文件夹下xml中标注框

#!usr/bin/env python # -*- coding:utf-8 _*- """ @author:AI @file: delete_xml.py @time: 2024/04/10 """""" 在这个脚本中,remove_named_objects_from_xml 函数负责处理单个 XML 文件。它首先解析文件,然后遍历所有的 …

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

前言&#xff1a; 零基础学Python&#xff1a;Python从0到100最新最全教程。 想做这件事情很久了&#xff0c;这次我更新了自己所写过的所有博客&#xff0c;汇集成了Python从0到100&#xff0c;共一百节课&#xff0c;帮助大家一个月时间里从零基础到学习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点阵屏真的是遍布我们我们生活的每个角落&#xff0c;从街边的流动显示字的招牌到你的液晶显示屏&#xff0c;都是基于点阵屏的原理研究出来的。还有那个世界上最大的球状建筑物&#xff1a;MSG Sphere&#xff…

三极管结构难?——秒了

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