js无法获取headers中Content-Disposition

原创 已于 2022-07-22 09:22:08 修改 · 4.9k 阅读 · 11 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #前端

于 2022-07-20 15:15:39 首次发布
本文探讨了前端导出下载功能在上线时遇到的Content-Disposition头暴露限制，通过分析发现是浏览器的跨域安全策略导致。解决方案是在后端增加Access-Control-Expose-Headers，确保Content-Disposition在响应中可见，从而实现成功导出。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

导出下载功能

问题重现

前端实现导出下载功能

这里是实现了 导出的功能 但是在线上的时候 出现了 导出失败的问题；

我们需要拿到响应头里的Content-Disposition字段的值，从中分离出文件名。

在这里插入图片描述

本地可以看到 打印出来了content-disposition

在这里插入图片描述
线上的network中也可以看到 这个文件名；但是我把它从请求头中打印出来的时候，就没有这个字段；所以线上就会导出失败
在这里插入图片描述

分析问题

浏览器限制了这一类请求头的暴露问题；所以需要服务端配合完成；

在这里插入图片描述

解决方案

后端虽然加了这个；但是我们只能在network中看到，无法通过js在请求头中拿到Content-Disposition
所以还需要加一段代码

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

效果

加上这一段代码就可以导出成功了；
在这里插入图片描述
这里附上后端代码

在这里插入图片描述

前后端分离项目中，后端无法获取 content-disposition
2302_78953577的博客
07-03 1231
脑壳儿痛得很~
js无法获取响应header的Content-Disposition字段（2020）
热门推荐
PGguoqi的博客
06-18 2万+
js无法获取响应header的Content-Disposition字段1、问题情景2、原理（病灶）Access-Control-Expose-Headers3、解决 1、问题情景 发送协议请求一个文件流，需要在回包里拿到响应头里的Content-Disposition字段的值，从中分离出文件名。【详见另一篇文章 a标签/js 下载文件（2020）】 但是通过查看控制台，header里确实有这个属性： 在控制台Network里明明能看到，但是在响应拦截器里用js headers["content-disp
【JS】无法获取response headers中Content-Disposition
qq_45677671的博客
05-18 4719
无法获取response headers中Content-Disposition
客户端拿不到响应头Content-Disposition
luo0617的博客
08-21 1621
客户端拿不到后端返回的响应头字段
axios无法获取响应头headers的Content-Disposition
w345731923的专栏
02-25 1万+
在控制台Network里明明能看到，但是在响应拦截器里用jsheaders["content-disposition"]来获取，但是打印 header对象里并没有content-disposition，无法获取，这是什么原因？ 根据MDN文档：Access-Control-Expose-Headers 默认情况下，header只有六种 simple response headers （简单响应首部）可以暴露给外部： Cache-Control Content-Language Conten..
更加优雅的下载文件 --- http header Content-Disposition 学习
JackZhouMine
07-02 1863
Content-Disposition 在响应头中，告诉浏览器如何处理返回的内容，在表单提交中，说明表单字段信息。download 用于指定名字，如果不指定，浏览器会使用路径的最后一部分作为文件名。标签的属性，用于指定下载动作或者指定文件的名字。用在响应头中，告诉浏览器如何处理返回的内容。页面上有表单，并且我们选择的表单提交方式为。预览，返回的内容替换当前页面，可使用。作为名字，文件后缀名浏览器自动识别。下载，使用 a 访问，会把。下载，接口指定文件名字。文件名含有中文，使用。
Access-Control-Expose-Headers 支持 Content-Disposition字段
12-12
`Access-Control-Expose-Headers` 是CORS（跨域资源共享）中的一个响应头，用于指定哪些响应头可以被客户端JavaScript代码访问。默认情况下，客户端只能访问一些基本的响应头，如 `Cache-Control`, `Content-...
axios无法获取响应头headers的Content-Disposition属性
weixin_50659636的博客
09-12 3210
需要在回包里拿到响应头里的Content-Disposition字段的值，从中分离出文件名。但是通过查看控制台，来获取，但是打印 header对象里并没有content-disposition，无法获取。浏览器限制了这一类请求头的暴露问题；所以需要要服务端配合完成；在控制台Network里明明能看到，但是在响应。我们可以在network中看到。，无法通过js在请求头中拿到c。所以还需要后端加一句代码。
vue中使用axios获取不到响应头Content-Disposition的解决办法
2301_76604664的博客
04-09 7109
【代码】vue中使用axios获取不到响应头Content-Disposition的解决办法。
【解决关于前端Vue接收后端easyExcel导出接口传过来的文件流，无法获取请求头Content-Disposition信息，即无法从文件流中获取导出文件名】
ZQL666123的博客
07-13 3385
【代码】【无标题】
vue使用blob下载二进制文件流时无法获取响应头里面的Content-Disposition来提取文件名的解决办法
weixin_44269229的博客
10-25 4115
下载二进制文件流获取响应头里面的文件名
JavaScript 无法获取响应 header 的 Content-Disposition 字段
明天也要努力的博客
05-03 7906
问题： 发送协议请求一个文件流，需要在回包里拿到响应头里的 Content-Disposition 字段的值，从中分离出文件名。 但是通过查看控制台，header 里确实有这个属性： 在控制台 Network 里明明能看到，但是在响应拦截器里用 js headers[“content-disposition”] 来获取，但是打印 header 对象里并没有 content-disposition 无法获取，这是什么原因？ 原因： 根据MDN文档：Access-Control-Expose-Headers
[Axios]axios无法获取响应头headers的Content-Disposition
SCUhzs
07-27 5709
[Axios]axios无法获取响应头headers的Content-Disposition
嵌入页面不能正常获取 reponse header : content-disposition
最新发布
加油啊，为了每一天。
02-11 719
在本系统中，通过 Axios 发起文件下载请求时可以正常获取到 Content-Disposition 响应头，但在嵌入页面（如 iframe）发起相同请求时却无法获取。原因是浏览器的安全策略限制了跨域请求对敏感响应头的访问。解决方案是在 Nginx 配置中添加 add_header Access-Control-Expose-Headers "Content-Disposition";，以明确暴露该响应头。
前端js获取不到response header中自定义内容的解决方法
喵爬架
09-10 1万+
原因：跨域后系统为了安全去掉自定义头 解决方法： 通过给header允许前端访问 解决跨域后系统为了安全去掉自定义头，后端在返回response时给header加上 Access-Control-Expose-Headers 如下： res.setHeader(“Access-Control-Expose-Headers”,“自定义头”); 下面展示一些 内联代码片。 // A code block var foo = 'bar'; //ajax 请求 $.ajax({ type: "post", u
前端获取不到后台传递的header
sun
07-19 7885
后台刷新token时，在拦截器中设置了headers的值： response.setHeader("access_token", newToken); 但是前端一直获取不到此header,只能获取到cache-control:"private, must-revalidate",content-type:"application/json",这两个字段 如果想要让前端获取到返回的header，需...
vue axios下载excel时获取不到返回的消息头Content-Disposition
fuck487的博客
03-26 1万+
参考：https://www.cnblogs.com/smiler/p/8708815.html vue的axios下载excel时，获取不到Content-Disposition内容，提取文件名 function postDownload(downloadUrl, params, contentType, callback){ let headers = { 'Conten...
在前后端分离项目中，前端项目获取不到后端项目添加的请求头信息
积跬步，至千里。
10-21 3901
在前后端分离项目中，前端项目获取不到后端项目添加的请求头信息
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小莉爱编程

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值