首页 > 其他分享 >vue中使用axios获取不到响应头Content-Disposition的解决办法

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

时间:2023-06-13 11:37:26浏览次数:36  
标签:Access axios 响应 Content Headers vue Disposition

项目中,后端返回的文件流,fileName是机构名称+服务器时间。
前端需要拿到响应头里的Content-Disposition字段的值,从中获取文件名

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

 

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

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

  响应首部 Access-Control-Expose-Headers 就是控制暴露的开关,列出哪些首部可以作为响应的一部分暴露给外部

 

前端部分

 

        let blob = new Blob([res.data], {type:"application/force-download"}) 
                console.log(blob);
                let fileReader = new FileReader()   
                console.log(res, '响应状态');
                const filename = decodeURIComponent(res.headers["content-disposition"].split("=")[1]);
                fileReader.readAsDataURL(blob)
                fileReader.onload = (e) => {
                    let a = document.createElement('a')
                    a.download = decodeURI(filename)
                    a.href = e.target.result
                    document.body.appendChild(a)
                    a.click()
                    document.body.removeChild(a)
                }

 

  

 

 

 

 

标签:Access,axios,响应,Content,Headers,vue,Disposition
From: https://www.cnblogs.com/theblogs/p/17477046.html

相关文章

  • vue实现的前端模糊匹配搜索
    vue实现的前端模糊匹配搜索<divid="app"><divclass="wrapper"><inputtype="text"v-model="searchText"><button@click="submit">搜索</button></div><table>......
  • vue3之setup
    一、Vue3中script的三种写法Vue3新增了一个叫做组合式api的东西,英文名叫CompositionAPI。因此Vue3的script现在支持三种写法。1)最基本的Vue2写法setup()属性<scriptsetup>无论是代码行数,还是代码的精简度,<scriptsetup>的方式是最简单的形式。如果......
  • vue项目各文件说明
     总体框架:一个vue-cli的项目结构如下,其中src文件夹是需要掌握的,所以本文也重点讲解其中的文件,至于其他相关文件,了解一下即可。 1、build——[webpack配置]build文件主要是webpack的配置,主要启动文件是dev-server.js,当我们输入npmrundev首先启动的就是dev-server.j......
  • vue调用百度api时,跨域问题解决方案
    最近在调用百度地图,文字转语音接口的时候,用vue,js来前端实现转换,及时语音播报,遇到点问题;1.之前直接不用accessToken,一个连接拼接抓取的,已经失效了。2.查看百度文档,更新后的接口,按照文档nodejs格式,一直都是报跨域问题,单独在headers中加'Access-Control-Allow-Origin':'*'无效。......
  • axios-使用axios发起基本的GET请求
    axios是一个专注于网络请求的库!<!DOCTYPEhtml><html> <head> <metacharset="utf-8"> <title></title> </head> <body> <scriptsrc="lib/axios.js"></script> <script> //1.调......
  • 6.12 vue3的学习
    1.创建vue3项目:在cmd中首先找到需要保存的路径,输入vuecreate+vue项目的取名,和之前创建vue2是一样的进行如下选择 2.vite创建vue3的方式在cmd中首先输入npminitvue@latest 3.安装依赖和运行依赖#安装依赖npminstall##运行依赖npmrundev#4.vue2创建app实......
  • Vue项目学习
    Vue学习笔记一、二维数组尝试varvm=newVue({ el:"#app", data:{ huilv:[ [6.8540,132.9787,1298.7013,1.3278], [6.8540,132.9787,1298.7013,1.3278] ],}二、watch监听实现watch:{ first:function(newValue){ this.second=newValue*this.hui......
  • 解压gzip数据流 和 file_get_contents()函数支持SSL错误和header
    file_get_contents()函数的相关参数,支持SSL错误和header $options=array("ssl"=>array("verify_peer"=>false,"verify_peer_name"=>false,), "http"=>array('timeout......
  • vue3
    目录一Vue3的变化1.性能的提升2、源码的升级3.拥抱TypeScript4.新的特性1.CompositionAPI(组合API)2.新的内置组件3.其他改变5组合式API和配置项API5.1OptionsAPI存在的问题5.2CompositionAPI的优势6项目分析分析文件目录main.jsVue2项目的main.js我们再来看看Vue3项目中......
  • Vue3基本功能实现
    vue3介绍#Vue3的变化#1.性能的提升 打包大小减少41%初次渲染快55%,更新渲染快133%内存减少54%#2.源码的升级 使用Proxy代替defineProperty实现响应式重写虚拟DOM的实现和Tree-Shaking#3.拥抱TypeScript Vue3可以更好的支持TypeScript......