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

最新推荐文章于 2024-05-28 16:09:15 发布
最新推荐文章于 2024-05-28 16:09:15 发布
阅读量2.2w 收藏 66
点赞数 43
分类专栏： 知识碎片 文章标签： javascript 前端 http html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/PGguoqi/article/details/106824957
版权

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
    评论
专栏目录
前端如何获取响应头Content-Disposition中的filename,获取文件类型fileType进行不同类型的文件预览
freddy的博客
01-05 1729
【代码】前端如何获取响应头Content-Disposition中的filename,获取文件类型fileType进行不同类型的文件预览。
java web文件上传-下载-查看操作.rar
05-08
在Java Web中，你可以使用`ServletResponse`的`setHeader()`方法设置响应头，如`Content-Disposition`来指定浏览器如何处理响应内容，通常设置为"attachment"以触发文件下载。同时，使用`getOutputStream()`获取输出...
下载文件，无法获取header中的Content-Disposition
就是你的博客
03-13 725
CORS header
axios无法获取响应头headers的Content-Disposition
最新发布
timebeign的博客
05-28 483
所以如果想要让客户端可以访问到其他的首部信息，服务器不仅要在heade里加入该首部，还要将它们在 Access-Control-Expose-Headers 里面列出来。2、原理（病灶）Access-Control-Expose-Headers 根据MDN文档：Access-Control-Expose-Headers。而响应首部 Access-Control-Expose-Headers 就是控制“暴露”的开关，它列出了哪些首部可以作为响应的一部分暴露给外部。最后运维配置又做了调整。
JavaScript 无法获取响应 header 的 Content-Disposition 字段
明天也要努力的博客
05-03 6638
问题： 发送协议请求一个文件流，需要在回包里拿到响应头里的 Content-Disposition 字段的值，从中分离出文件名。 但是通过查看控制台，header 里确实有这个属性： 在控制台 Network 里明明能看到，但是在响应拦截器里用 js headers[“content-disposition”] 来获取，但是打印 header 对象里并没有 content-disposition 无法获取，这是什么原因？ 原因： 根据MDN文档：Access-Control-Expose-Headers
js无法获取headers中Content-Disposition
qq_45018844的博客
07-20 4547
js无法获取响应header的Content-Disposition字段
【JS】无法获取response headers中Content-Disposition
qq_45677671的博客
05-18 2988
无法获取response headers中Content-Disposition
Response设置contnt-disposition响应头进行下载不跳转的问题
m0_46364526的博客
01-17 747
在指定response响应头，response.setHeader(“content-disposition”,(attachment；filename=xx.jpg))时，将attachment和filename中的间隔符号写成了：，造成该响应头信息无法被正常读取，进而不跳转下载页面。
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...
axios无法获取响应头headers的Content-Disposition属性
weixin_50659636的博客
09-12 2290
需要在回包里拿到响应头里的Content-Disposition字段的值，从中分离出文件名。但是通过查看控制台，来获取，但是打印 header对象里并没有content-disposition，无法获取。浏览器限制了这一类请求头的暴露问题；所以需要要服务端配合完成；在控制台Network里明明能看到，但是在响应。我们可以在network中看到。，无法通过js在请求头中拿到c。所以还需要后端加一句代码。
【JavaScript源代码】Vue通过阿里云oss的url连接直接下载文件并修改文件名的方法.docx
12-29
response.setHeader("Content-Disposition", "attachment; filename=" + URLEncoder.encode(param.get("name").toString(), "UTF-8")); byte[] buffer = new byte[1024]; int len; OutputStream outputStream = ...
在vue中使用axios实现post方式获取二进制流下载文件(实例代码)
10-15
如果即使这样仍然无法获取，后端可以考虑直接在响应体中提供一个名为`fileName`的字段，以JSON形式传递文件名。 在Vue项目中，为了方便全局使用axios，可以将axios实例注入到Vue的原型链上，如下所示： ```...
jsp页面生成word或excel.pdf
11-04
这涉及到HTTP响应头的设置，通过设置`Content-Disposition`字段来控制。如果设置为`inline`，浏览器会尝试打开文件；如果是`attachment`，则会触发下载。 ```java response.setHeader("Content-Disposition", ...
连接到txt文本的超链接，不直接打开而是点击后下载的处理方法
12-18
header('Content-Disposition: attachment; filename=' . $filename); // 读取并发送文件内容 if (file_exists($filename)) { readfile($filename); } else { die('File not found.'); } } else { die('...
vue中使用axios获取后端获取二进制流下载文件接口编写，以及无法获取headers中属性:content-disposition问题
w15635748705的博客
03-04 7753
获取二进制流文件api编写 这里的后端是使用Spring Boot框架编写的一个项目 我这里是使用的封装，然后调用的方式： 首先编写一个工具类： 名字为downloadRequest.js 代码注释如下： import axios from "axios"; /** * 文件下载的api封装 */ // 创建一个axios对象 const service = axios.create({ // 请求的基准路径 baseURL: "http://localhost:8082/api/v1",
JS根据conten-disposition保存文件
JeffanChen的博客
12-02 998
后台生成Excel并命名后传送 命名保存在Headers的Content-Disposition内 命名保存语句 Response.Headers.Add("Access-Control-Expose-Headers", "Content-Disposition"); 希望前端以该命名保存数据 那么该如何保存呢 源代码： 我这里先在页面加了 <a id="download" style={{ display: 'none' }}></a> 然后在调用API返回res后 if (r
导出时获取Content-Disposition里面的内容
m0_65742145的博客
09-13 321
【代码】导出时获取Content-Disposition里面的内容。
前端如何获取content-disposition
08-04
### 回答1： content-disposition 是 HTTP 协议中的一个头部字段，用于指示如何处理被请求的消息体。通常，它被用于下载文件时，指示浏览器以何种方式处理下载文件的响应。 获取 content-disposition 的方式取决于你是在客户端还是服务端。如果你是在客户端，可以使用浏览器的开发者工具查看响应头部中是否包含 content-disposition 字段。如果你是在服务端，可以查看响应头部的 content-disposition 字段来获取其值。 以下是一个示例 HTTP 响应，其中包含 content-disposition 字段： ``` HTTP/1.1 200 OK Content-Type: application/octet-stream Content-Disposition: attachment; filename="example.txt" Content-Length: 1234 <file content> ``` 在这个示例中，content-disposition 的值是 attachment; filename="example.txt"，指示浏览器应该将响应的消息体作为附件下载，并将文件名设置为 example.txt。 ### 回答2： 获取content-disposition可以通过以下几种方式实现： 1. 前端通过发送HTTP请求获取响应头中的content-disposition字段。可以使用XMLHttpRequest对象或fetch函数发送异步请求，并通过getResponseHeader方法获取content-disposition的值。 2. 在使用fetch函数发送请求时，可以通过设置请求的credentials属性为include，以便在跨域请求时，服务器可以将带有content-disposition字段的响应头发送给前端。 3. 如果前端使用的是某个特定的JavaScript库，如axios，可以查看库的文档，了解是否提供了获取响应头的方法，如通过拦截响应的方式。 需要注意的是，获取content-disposition字段可能会受到跨域资源共享（CORS）策略的限制。如果服务器没有明确允许前端访问content-disposition字段，前端将无法获取到该字段的值。在这种情况下，可以考虑使用服务器端的代理来获取content-disposition的值，并将其传递给前端。 总结起来，前端可以通过发送HTTP请求并获取响应头中的content-disposition字段来获取该字段的值。具体的实现方法可以根据前端所使用的技术栈和环境进行调整。 ### 回答3： 前端无法直接获取`content-disposition`，因为`content-disposition`是HTTP响应头部字段，在前端无法直接访问和获取。`content-disposition`常用于指定服务器响应的文件名称和下载方式。 前端可以通过发送HTTP请求并获取响应头部来获取`content-disposition`。常见的方法是使用AJAX或Fetch来发送请求，然后在返回的响应头部中查找`content-disposition`字段。 以下是一个示例使用Fetch API获取`content-disposition`的方法： ```JavaScript fetch('http://example.com/file', { method: 'GET', headers: { 'Content-Type': 'application/octet-stream', }, }) .then(response => { const contentDisposition = response.headers.get('content-disposition'); console.log(contentDisposition); }) .catch(error => { console.log(error); }); ``` 这段代码通过使用Fetch API发送一个GET请求到`http://example.com/file`，然后从响应头部中获取`content-disposition`字段的值，并将其打印到控制台。 需要注意的是，跨域请求需要在服务器端设置适当的响应头部，以允许前端访问响应头部。否则，浏览器将会阻止前端获取其他域的响应头部，以保护用户的安全和隐私。
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值