js无法获取响应header的Content-Disposition字段（2020）

最新推荐文章于 2024-07-03 16:07:50 发布
最新推荐文章于 2024-07-03 16:07:50 发布
阅读量2.3w 收藏 66
点赞数 43
分类专栏： 知识碎片 文章标签： javascript 前端 http html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/pgguoqi/article/details/106824957
版权
在前端开发中，遇到无法通过JS获取HTTP响应头Content-Disposition的情况，原因是浏览器安全策略限制。本文分析了Access-Control-Expose-Headers原理，解释了为何在控制台能看到但JS无法访问。解决方案是后端在响应头中添加Access-Control-Expose-Headers，并包含Content-Disposition，从而允许客户端获取该字段。
摘要由CSDN通过智能技术生成

js无法获取响应header的Content-Disposition字段

1、问题情景

发送协议请求一个文件流，需要在回包里拿到响应头里的Content-Disposition字段的值，从中分离出文件名。【详见另一篇文章 a标签/js 下载文件（2020）】

但是通过查看控制台，header里确实有这个属性：
在这里插入图片描述
在控制台Network里明明能看到，但是在响应拦截器里用js headers["content-disposition"]来获取，但是打印 header对象里并没有content-disposition，无法获取，这是什么原因？

2、原理（病灶）Access-Control-Expose-Headers

根据MDN文档：Access-Control-Expose-Headers

默认情况下，header只有六种 simple response headers （简单响应首部）可以暴露给外部：

  • Cache-Control
  • Content-Language
最低0.47元/天 解锁文章
不搬砖还能干啥
关注
  • 43
    点赞
  • 踩
  • 66
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
专栏目录
用js取得服务器响应的头部信息
bluesft的专栏
06-27 1万+
var xmlHttp;var requestType = ""; function createXMLHttpRequest() {    if (window.ActiveXObject) {        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");    }    else if (window.XMLHttpRequest) { 
下载文件，无法获取header中的Content-Disposition
就是你的博客
03-13 813
CORS header
content-disposition-parser:解析内容处置HTTP标头
03-07
内容配置解析器 用于Content-Disposition HTTP标头的小巧且经过全面测试的JS解析器，对于nodejs和浏览器环境零依赖。 该库解析标头字符串，使用可以提取的属性构造对象。 没有验证，没有转换（decodeURIComponent（）除外）只是试图尽可能地提取数据。 安装 $ npm install content-disposition-parser 用法 const parser = require ( 'content-disposition-parser' ) parser ( 'content-disposition: inline; filename=example.pdf' ) //-> { filename: 'example.pdf', type: 'inline' } parser ( 'content-disposition: form-dat
前后端分离项目中，后端无法获取 content-disposition
最新发布
2302_78953577的博客
07-03 431
脑壳儿痛得很~
JavaScript 无法获取响应 header 的 Content-Disposition 字段
明天也要努力的博客
05-03 6829
问题： 发送协议请求一个文件流，需要在回包里拿到响应头里的 Content-Disposition 字段的值，从中分离出文件名。 但是通过查看控制台，header 里确实有这个属性： 在控制台 Network 里明明能看到，但是在响应拦截器里用 js headers[“content-disposition”] 来获取，但是打印 header 对象里并没有 content-disposition 无法获取，这是什么原因？ 原因： 根据MDN文档：Access-Control-Expose-Headers
vue中使用axios获取不到响应头Content-Disposition的解决办法
2301_76604664的博客
04-09 3198
【代码】vue中使用axios获取不到响应头Content-Disposition的解决办法。
axios无法获取响应头headers的Content-Disposition属性
weixin_50659636的博客
09-12 2432
需要在回包里拿到响应头里的Content-Disposition字段的值，从中分离出文件名。但是通过查看控制台，来获取，但是打印 header对象里并没有content-disposition，无法获取。浏览器限制了这一类请求头的暴露问题；所以需要要服务端配合完成；在控制台Network里明明能看到，但是在响应。我们可以在network中看到。，无法通过js在请求头中拿到c。所以还需要后端加一句代码。
【JS】无法获取response headers中Content-Disposition
qq_45677671的博客
05-18 3321
无法获取response headers中Content-Disposition
js无法获取headers中Content-Disposition
qq_45018844的博客
07-20 4647
js无法获取响应header的Content-Disposition字段
JS根据conten-disposition保存文件
JeffanChen的博客
12-02 1032
后台生成Excel并命名后传送 命名保存在Headers的Content-Disposition内 命名保存语句 Response.Headers.Add("Access-Control-Expose-Headers", "Content-Disposition"); 希望前端以该命名保存数据 那么该如何保存呢 源代码： 我这里先在页面加了 <a id="download" style={{ display: 'none' }}></a> 然后在调用API返回res后 if (r
js 文件自动下载，而不是自动打开 Content-disposition
qingfeidie的博客
11-22 1万+
Content-disposition Content-disposition 是 MIME 协议的扩展，MIME 协议指示 MIME 用户代理如何显示附加的文件。当 Internet Explorer 接收到头时，它会激活文件下载对话框，它的文件名框自动填充了头中指定的文件名。（请注意，这是设计导致的；无法使用此功能将文档保存到用户的计算机上，而不向用户询问保存位置。）  
content-disposition：创建并解析HTTP Content-Disposition标头
02-03
内容倾向 创建并解析HTTP Content-Disposition标头 安装 $ npm install content-disposition API var contentDisposition = require ( 'content-disposition' ) contentDisposition（文件名，选项） 使用给定的文件名（如果提供）创建附件Content-Disposition标头值。 filename是可选的，如果不需要文件名，但是要指定options ，请将filename设置为undefined 。 res . setHeader ( 'Content-Di
eleemnt-ui 前端下载后端返回的文件流，取请求头content-disposition中的文件名称
皮卡丘
04-12 2011
在控制台Network里明明能看到，但是在响应拦截器里用js headers[“content-disposition”]来获取，但是打印 header对象里并没有content-disposition，无法获取，这是什么原因？上面问题提到的content-disposition不在其中，所以即使服务器在协议回包里加了该字段，但因没“暴露”给外部，客户端就“看得到，吃不到”。意思就是说让客户端只可以访问得到，既可以在Network里看到，也可以在代码里获取到他们的值。此时获取到的是一个乱码。
响应头Content-disposition，通知浏览器以附件形式去下载文件
isjun26
07-03 7137
1.Content-disposition响应头的作用：通知浏览器处理内容的方式以附件的形式下载。 2.在现实开发中很多时候我们都需要提供相应的功能给用户下载附件。比如：智联招聘（下载简历）， 百度云（下载资料） 3.代码 代码： import java.io.FileInputStream; import java.io.IOException; import java.io.Ou...
跨域情况下前端获取response header的问题
m0_37714008的博客
07-13 4060
1、问题原因 * 前端发送请求下载文件，在Response Headers里通过js获取响应头里的Content-Disposition字段的值，从中分离出文件名 * 但是通过查看NetWork控制台确实是能看到content-disposition,但是在响应拦截器里用js headers["content-disposition"]来获取，但是打印 header对象里并没有content-disposition，无法获取，这是什么原因？ 2、原理 Access-Control-Expose-Header
vue.js前端实现excel表格导出和获取headers里的信息
JHY_USER的博客
03-15 644
vue.js前端实现excel表格导出和获取headers里的信息
filename = parse_qs(content_disposition)[‘filename‘][0] 报错 python开发
zengliguang的专栏
04-20 129
如果服务器没有提供这个字段，尝试从其他途径（如 API 文档、与开发者的沟通等）了解文件名获取方式。如果确实无从得知文件名，可能需要采用其他方法（如自定义文件名）来保存文件。请根据上述可能性检查您的代码和响应头内容，找出导致报错的具体原因，并采取相应的解决方案。如果问题依然存在，请提供详细的报错信息和响应头内容，以便进一步分析和解决问题。字段的值可能不符合查询字符串的格式。如果发现格式有问题，可能需要联系服务器端开发者修复，或者根据具体情况调整解析逻辑。字段中匹配并提取双引号包围的文件名。
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..
前端如何获取content-disposition
08-04
前端无法直接获取`content-disposition`，因为`content-disposition`是HTTP响应头部字段，在前端无法直接访问和获取。`content-disposition`常用于指定服务器响应的文件名称和下载方式。 前端可以通过发送HTTP请求...
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值