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.rhkb.cn/news/303210.html

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

相关文章

【算法刷题】八大排序算法总结(冒泡、选择、插入、二分插入、归并、快速、希尔、堆排序)

文章目录 八大排序算法总结1.冒泡排序2.选择排序3.插入排序4.二分插入排序5.归并排序6.快速排序7.希尔排序8.堆排序 八大排序算法总结 排序排序方法平均情况最好情况最坏情况空间稳定性1冒泡排序O(n2)O(n)O(n2)O(1)稳定2选择排序O(n2)O(n2)O(n2)O(1)不稳定3插入排序O(n2)O(n)O…

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

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

30个Python操作小技巧

前言 1、列表推导 列表的元素可以在一行中进行方便的循环。 numbers [1, 2, 3, 4, 5, 6, 7, 8] even_numbers [number for number in numbers if number % 2 0] print(even_numbers)输出: 在这里插入代码片[1,3,5,7] 同时,也可以用在字典上。 d…

前端入门:极简登录网页的制作(未使用JavaScript制作互动逻辑)

必备工具:vscode Visual Studio Code - Code Editing. Redefined 目录 前言 准备 HTML源文件的编写(构建) head部分 body部分 网页背景设置 网页主体构建 CSS源文件的编写(设计) 结果展示 前言 博主稍稍自…

计算机视觉——引导APSF和梯度自适应卷积增强夜间雾霾图像的可见性算法与模型部署(C++/python)

摘要 在夜间雾霾场景中,可见性经常受到低光照、强烈光晕、光散射以及多色光源等多种因素的影响而降低。现有的夜间除雾方法常常难以处理光晕或低光照条件,导致视觉效果过暗或光晕效应无法被有效抑制。本文通过抑制光晕和增强低光区域来提升单张夜间雾霾…

LINUX系统触摸工业显示器芯片应用方案--Model4(简称M4芯片)

背景介绍: 触摸工业显示器传统的还是以WINDOWS为主,但近年来,安卓紧随其后,但一直市场应用情况不够理想,反而是LINUX系统的触摸工业显示器大受追捧呢? 触摸工业显示器传统是以Windows系统为主&#xff0c…

计算机视觉异常检测——PatchCore面向全召回率的工业异常检测

1. 概述 异常检测问题在工业图像数据分析中扮演着至关重要的角色,其目的是从大量正常数据中识别出异常行为或模式。这一任务的挑战在于,正常数据的样本相对容易获取,而异常情况却因其稀有性和多样性而难以收集。为了解决这一问题&#xff0c…

Django之五种中间件定义类型—process_request、process_view、process_response.......

目录 1. 前言 2. 基础中间件 3. 如何自定义中间件 4. 五种自定义中间件类型 4.1 process_request 4.2 process_view 4.3 process_response 4.4 process_exception 4.5 process_template_response 5. 最后 1. 前言 哈喽,大家好,我是小K,今天咋们…

51单片机学习笔记15 LCD12864(带字库)显示屏使用

51单片机学习笔记15 LCD12864(带字库)显示屏使用 一、LCD12864简介二、管脚定义三、命令1. 功能能设定2. 清屏指令(0x01)3. 地址归位4. 进入设定点5. 显示状态开关6. 设定CGRAM地址7. 设定DDRAM地址8. 写资料到RAM9. 读出RAM 四、…

【目标检测】-入门知识

1、回归与分类问题 回归问题是指给定输入变量(特征)和一个连续的输出变量(标签),建立一个函数来预测输出变量的值。换句话说,回归问题的目标是预测一个连续的输出值,例如预测房价、股票价格、销售额等。回归问题通常使用回归分析技术,例如线性回归、多项式回归、决策树…

嵌入式学习48-单片机1

51单片机—————8位单片机 裸机驱动 无系统 linux驱动 有系统 驱动-----反映硬件变化 MCU 微控器 MPU CPU GPU 图像处理 IDE 集成开发环境 peripheral 外设 SOC: system on chip P0:8bit——8个引脚 …

【架构师】-- 浅淡架构的分类

什么是架构? 说到架构,这个概念没有很清晰的范围划分,也没有一个标准的定义,每个人的理解可能都不一样。 架构在百度百科中是这样定义的:架构,又名软件架构,是有关软件整体结构与组件的抽象描…

vue快速入门(十二)v-key索引标志

注释很详细&#xff0c;直接上代码 上一篇 新增内容 v-key的使用场景数组筛选器的使用 源码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, i…

(源码+部署+讲解)基于Spring Boot + Vue编程学习平台的设计与实现

前言 &#x1f497;博主介绍&#xff1a;✌专注于Java、小程序技术领域和毕业项目实战✌&#x1f497; &#x1f447;&#x1f3fb; 精彩专栏 推荐订阅&#x1f447;&#x1f3fb; 2024年Java精品实战案例《100套》 &#x1f345;文末获取源码联系&#x1f345; &#x1f31f;…

基于PSO优化的CNN-GRU-Attention的时间序列回归预测matlab仿真

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 4.1卷积神经网络&#xff08;CNN&#xff09;在时间序列中的应用 4.2 GRU网络 4.3 注意力机制&#xff08;Attention&#xff09; 5.算法完整程序工程 1.算法运行效果图预览 优化前 优化…

番茄 abogus rpc调用

声明: 本文章中所有内容仅供学习交流使用&#xff0c;不用于其他任何目的&#xff0c;抓包内容、敏感网址、数据接口等均已做脱敏处理&#xff0c;严禁用于商业用途和非法用途&#xff0c;否则由此产生的一切后果均与作者无关&#xff01;wx a15018601872 本文章…

STM32+ESP8266水墨屏天气时钟:文字取模和图片取模教程

项目背景 本次的水墨屏幕项目需要显示一些图片和文字&#xff0c;所以需要对图片和文字进行取模。 取模步骤 1.打开取模软件 2.选择图形模式 3.设置字模选项 注意&#xff1a;本次项目采用的是水墨屏&#xff0c;并且是局部刷新的代码&#xff0c;所以设置字模选项可能有点…

人工智能——深度学习

4. 深度学习 4.1. 概念 深度学习是一种机器学习的分支&#xff0c;旨在通过构建和训练多层神经网络模型来实现数据的高级特征表达和复杂模式识别。与传统机器学习算法相比&#xff0c;深度学习具有以下特点&#xff1a; 多层表示学习&#xff1a;深度学习使用深层神经网络&a…

linux 迁移home目录以及修改conda中pip的目录,修改pip安装路径

1&#xff09;sudo rsync -av /home/lrf /data/home/lrf 将/home目录下的文件进行复制&#xff08;假设机械硬盘挂载在/data目录下&#xff09;** 2&#xff09;usermod -d /data/home/lrf -m lrf 修改用户$HOME变量** 3&#xff09;vi /etc/passwd 查看对应用户的$HOME变量是…

环境监测站升级选择ARM网关驱动精准数据采集

物联网技术的深入发展和环保需求的不断攀升&#xff0c;API调用网关在环境监测领域的应用正成为科技创新的重要推手。其中&#xff0c;集成了API调用功能的ARM工控机/网关&#xff0c;以其出色的计算性能、节能特性及高度稳定性&#xff0c;成功搭建起连接物理世界与数字世界的…