js无法获取headers中Content-Disposition

已于 2022-07-22 09:22:08 修改
阅读量4.5k 收藏 8
点赞数 6
分类专栏： 项目实战小问题 文章标签： javascript 前端
于 2022-07-20 15:15:39 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45018844/article/details/125892399
版权

导出下载功能

问题重现

前端实现导出下载功能

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

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

在这里插入图片描述

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

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

分析问题

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

在这里插入图片描述

解决方案

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

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

效果

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

在这里插入图片描述

小莉爱编程
关注
  • 6
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
专栏目录
vue在响应头response中获取自定义headers操作
10-15
主要介绍了vue在响应头response中获取自定义headers操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
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 就是控制“暴露”的开关，它列出了哪些首部可以作为响应的一部分暴露给外部。最后运维配置又做了调整。
【JS】无法获取response headers中Content-Disposition
qq_45677671的博客
05-18 2988
无法获取response headers中Content-Disposition
axios无法获取响应头headers的Content-Disposition属性
weixin_50659636的博客
09-12 2290
需要在回包里拿到响应头里的Content-Disposition字段的值，从中分离出文件名。但是通过查看控制台，来获取，但是打印 header对象里并没有content-disposition，无法获取。浏览器限制了这一类请求头的暴露问题；所以需要要服务端配合完成；在控制台Network里明明能看到，但是在响应。我们可以在network中看到。，无法通过js在请求头中拿到c。所以还需要后端加一句代码。
跨域获取 Headers 中的 Content-Disposition
MAIMIHO的博客
11-02 850
在默认情况下，浏览器限制了对跨域请求响应的访问权限，阻止了读取敏感的响应头信息（例如。这样浏览器才会在跨域请求成功后暴露该头信息。在客户端使用 Axios 发起跨域请求时，确保你在。这是由于跨域请求的安全策略所决定的。头信息，需要在服务器端进行一些配置。首先，确保服务器返回的响应中包含。以上代码将在每个响应头中添加。如果你想在跨域请求中获取到。，使浏览器能够获取到。
[Axios]axios无法获取响应头headers的Content-Disposition
SCUhzs
07-27 4305
[Axios]axios无法获取响应头headers的Content-Disposition
vue axios无法获取响应头Content-Disposition字段
weixin_43485503的博客
03-17 4016
vue axios无法获取响应头Content-Disposition字段
前端如何获取响应头Content-Disposition中的filename
jojoyoyo88的博客
04-13 4784
后端在返回文件流时，将文件类型放在了响应头中，需要前端获取filename后手动添加文件名后缀。
vue中使用axios获取不到响应头Content-Disposition的解决办法
2301_76604664的博客
04-09 2639
【代码】vue中使用axios获取不到响应头Content-Disposition的解决办法。
php-headers
03-29
当需要用户下载文件而不是在浏览器中显示时，可以通过设置`Content-Disposition`等头来触发下载行为。 示例代码： ```php header('Content-Type: application/octet-stream'); header('Content-Disposition: ...
webClient获取下载文件名示例（不在地址中获取）
10-08
"webClient获取下载文件名示例（不在地址中获取）"这个主题关注的是如何在不依赖URL来获取下载文件的真实名称，而是通过其他方式来实现。这是因为URL中的文件名可能并不是服务器实际发送的文件名，或者为了安全和...
React获取Java后台文件流并下载Excel文件流程解析
08-19
1. Java后台服务器响应头设置：包括Content-Disposition、Access-Control-Expose-Headers、FileName等参数的设置。 2. Excel文件流生成：使用ExcelUtils工具类生成Excel文件流。 3. React前端文件流处理：使用axios...
multipart-data-parser:多部分表单数据解析器
05-11
4. **头部信息处理**：库能够解析每个数据部分的头部信息，如`Content-Type`，`Content-Disposition`等，这些信息对于确定如何处理数据至关重要。 5. **错误处理**：提供错误处理机制，当解析过程中遇到问题时，能够...
前后端分离项目中，后端无法获取 content-disposition
最新发布
2302_78953577的博客
07-03 320
脑壳儿痛得很~
使用window.open实现导出下载如何带请求头
热门推荐
qq_45018844的博客
03-19 1万+
请求头： 首先我们要知道window.open是不可以带请求头的 报这个错的时候就是没有带请求头了 每次请求都是需要这两个的 解决办法： 安装这个插件就非常容易了 const params = { //这个里面都是参数 projectId: this.projectId, startTime: this.startTime, endTime: this.endTime } axios.get('/api/project-man
后端给你返回文件流，前端实现下载文件
qq_45018844的博客
07-01 9908
后端返回的文件流，前端如何实现下载导出文件
一分钟教会你调接口，包教包会
qq_45018844的博客
02-03 7878
前端调用后端接口 作为一个前端小白的你是不是也在彷徨，哈哈哈，让我来告诉你吧，调用接口很简单哦，跟着我来，一分钟，包教包会！！！ 首先第一步，写一个简单的表格页面，其他的也行，这是有数据的，没调用接口是没有数据的 马上开始教学了，认真点 第一步，给表格绑定一个刷新的事件 第二步在接口文档中，找到这个页面的接口 实现这个onload方法 在这里引入方法的时候，别引用错误的接口了 找到api重新写一个接口的方法，命个名，url就是你这个接口的地址，看后端接口文档，记得看是post还
跨域的情况下如何使用js获取content-disposition
09-05
### 回答1： 可以使用JavaScript通过XMLHttpRequest对象发送HTTP请求，并在响应头中查找Content-Disposition头部来获取文件名。具体实现方法如下： 1. 创建XMLHttpRequest对象： ```javascript var xhr = new XMLHttpRequest(); ``` 2. 发送HTTP请求： ```javascript xhr.open('GET', '文件的URL', true); xhr.send(); ``` 3. 获取响应头中的Content-Disposition头部信息： ```javascript xhr.onload = function() { var contentDisposition = xhr.getResponseHeader('Content-Disposition'); // 解析contentDisposition获取文件名 } ``` 在获取到Content-Disposition头部信息后，可以使用正则表达式或其他方法解析出文件名，并进行相应的处理。 ### 回答2： 在跨域的情况下，由于浏览器的同源策略限制，普通的JavaScript无法直接获取到其他域名的响应头信息，包括content-disposition。 但是可以通过一些方法解决这个问题。以下是一种解决方案： 1. 在服务器端设置合适的响应头 要想在跨域的情况下获取content-disposition，我们需要在目标服务器的响应头中设置合适的允许跨域资源共享（CORS）相关的响应头。 在服务器端的响应中添加以下响应头字段： Access-Control-Expose-Headers: Content-Disposition 2. 前端处理跨域请求 在前端发送跨域请求时，需要设置XMLHttpRequest对象的withCredentials属性为true，以便发送跨域凭证。 同时，需要将contentDisposition响应头信息放入自定义的响应头中，比如X-Custom-Content-Disposition。 在服务端的响应中添加以下响应头字段： Access-Control-Expose-Headers: X-Custom-Content-Disposition 3. 前端获取content-disposition 在接收到响应后，通过XMLHttpRequest对象的getResponseHeader()方法获取自定义的响应头信息，并从中解析出content-disposition字段的值。 示例代码如下： ```javascript var xhr = new XMLHttpRequest(); xhr.withCredentials = true; xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { var contentDisposition = xhr.getResponseHeader('X-Custom-Content-Disposition'); // 解析content-disposition字段的值 console.log(contentDisposition); } }; xhr.open('GET', 'http://example.com/api/endpoint', true); xhr.send(); ``` 以上是一种在跨域情况下获取content-disposition的解决方案，通过设置响应头和处理跨域请求，可以在前端通过JavaScript获取到content-disposition的值。 ### 回答3： 在跨域的情况下，使用JavaScript获取content-disposition的方式有限。由于浏览器的同源政策的限制，JavaScript只能在相同域的页面中对XHR对象返回的HTTP头进行访问，无法直接获取其他域下的服务器返回的HTTP头信息。 但是，如果你对被请求的资源服务器具有控制权，并且允许跨域请求，那么可以通过在服务器端设置Access-Control-Expose-Headers响应头来解决这个问题。 在服务器端的响应头中添加Access-Control-Expose-Headers: content-disposition，然后在客户端发送跨域请求时，服务器就会将content-disposition字段暴露出来，在XHR的getResponseHeader()方法中可以通过content-disposition参数来获取。 例如，使用XMLHttpRequest发送跨域请求，并获取content-disposition的示例代码如下： ``` var xhr = new XMLHttpRequest(); xhr.open('GET', 'http://其他域的地址', true); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { var contentDisposition = xhr.getResponseHeader('Content-Disposition'); // 对contentDisposition进行处理 } }; xhr.send(); ``` 需要注意的是，在服务器端设置Access-Control-Expose-Headers响应头之前，需要先配置好跨域请求的相关设置，确保服务器端能够正确处理跨域请求。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

小莉爱编程

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

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

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

打赏作者

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

抵扣说明：

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

余额充值