【VUE】无法获取header中的Content-Disposition

最新推荐文章于 2024-08-21 12:27:06 发布
最新推荐文章于 2024-08-21 12:27:06 发布
阅读量478 收藏 2
点赞数 6
分类专栏： vue 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33489538/article/details/141184900
版权

文章目录

VUE中使用axios 问题

问题：VUE中 使用 axios跨域请求时，无法获取header中的Content-Disposition，并且network中已显示Content-Disposition

提示：以下是本篇文章正文内容，下面案例可供参考

一、原因

​

在使用CORS方式跨域时，浏览器只会返回默认的头部Header

​​​​在这里插入图片描述
​

二、解决

后端在返回时，需要设置公开的响应头Access-Control-Expose-Headers，设置你需要获取的头部以及自定义的信息

Access-Control-Expose-Headers:Content-Disposition

设置公开的响应头
默认情况下，浏览器不会向应用公开所有响应头。 有关详细信息，请参阅 W3C 跨源资源共享（术语）：简单响应头。

默认情况下可用的响应头包括：

Cache-Control
Content-Language
Content-Type
Expires
Last-Modified
Pragma

益达是我
关注
专栏目录
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
vue下载Java返回的二进制文件流及文件名需要从headers[‘content-disposition‘]中获取
weixin_53003063的博客
06-10 3488
二进制文件流下载
下载文件，无法获取header中的Content-Disposition
就是你的博客
03-13 829
CORS header
前后端分离项目中，后端无法获取 content-disposition
2302_78953577的博客
07-03 455
脑壳儿痛得很~
vue中使用axios获取不到响应头Content-Disposition的解决办法
2301_76604664的博客
04-09 3316
【代码】vue中使用axios获取不到响应头Content-Disposition的解决办法。
axios无法获取响应头headers的Content-Disposition属性
weixin_50659636的博客
09-12 2471
需要在回包里拿到响应头里的Content-Disposition字段的值，从中分离出文件名。但是通过查看控制台，来获取，但是打印 header对象里并没有content-disposition，无法获取。浏览器限制了这一类请求头的暴露问题；所以需要要服务端配合完成；在控制台Network里明明能看到，但是在响应。我们可以在network中看到。，无法通过js在请求头中拿到c。所以还需要后端加一句代码。
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..
【记一次采坑】response 中 content-disposition里设置attachment后 文件无法下载只能预览
weixin_51050770的博客
05-10 5273
感谢 http://t.csdn.cn/0zp87http://t.csdn.cn/0zp87开发一个springMVC Web文件下载功能，想要通过设置HTTP的responseheader中的 response.setHeader("Content-Disposition", "attachment;filename=" + filename); 设置下载文件的名称，浏览器通过接口访问，弹出下载文件对话框。 结果发现一些文件可以实现弹出下载，一些文件则变成了浏览器预览。 经过CSDN文档查找.
eleemnt-ui 前端下载后端返回的文件流，取请求头content-disposition中的文件名称
皮卡丘
04-12 2019
在控制台Network里明明能看到，但是在响应拦截器里用js headers[“content-disposition”]来获取，但是打印 header对象里并没有content-disposition，无法获取，这是什么原因？上面问题提到的content-disposition不在其中，所以即使服务器在协议回包里加了该字段，但因没“暴露”给外部，客户端就“看得到，吃不到”。意思就是说让客户端只可以访问得到，既可以在Network里看到，也可以在代码里获取到他们的值。此时获取到的是一个乱码。
vue.js前端实现excel表格导出和获取headers里的信息
JHY_USER的博客
03-15 645
vue.js前端实现excel表格导出和获取headers里的信息
vue在响应头response中获取自定义headers操作
10-15
Vue.js 是一款流行的前端框架，用于构建用户界面。...总结，本文讲解了Vue中如何在响应头中获取自定义headers，以及`token`在前端存储和使用的方法，这些都是Web开发中确保安全性及优化性能的重要实践。
【JS】无法获取response headers中Content-Disposition
qq_45677671的博客
05-18 3370
无法获取response headers中Content-Disposition
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...
跨域获取 Headers 中的 Content-Disposition
MAIMIHO的博客
11-02 935
在默认情况下，浏览器限制了对跨域请求响应的访问权限，阻止了读取敏感的响应头信息（例如。这样浏览器才会在跨域请求成功后暴露该头信息。在客户端使用 Axios 发起跨域请求时，确保你在。这是由于跨域请求的安全策略所决定的。头信息，需要在服务器端进行一些配置。首先，确保服务器返回的响应中包含。以上代码将在每个响应头中添加。如果你想在跨域请求中获取到。，使浏览器能够获取到。
客户端拿不到响应头Content-Disposition
最新发布
luo0617的博客
08-21 200
客户端拿不到后端返回的响应头字段
[Axios]axios无法获取响应头headers的Content-Disposition
SCUhzs
07-27 4544
[Axios]axios无法获取响应头headers的Content-Disposition
JavaScript 无法获取响应 header 的 Content-Disposition 字段
明天也要努力的博客
05-03 6854
问题： 发送协议请求一个文件流，需要在回包里拿到响应头里的 Content-Disposition 字段的值，从中分离出文件名。 但是通过查看控制台，header 里确实有这个属性： 在控制台 Network 里明明能看到，但是在响应拦截器里用 js headers[“content-disposition”] 来获取，但是打印 header 对象里并没有 content-disposition 无法获取，这是什么原因？ 原因： 根据MDN文档：Access-Control-Expose-Headers
解决node.js报错Invalid character in header content [“Content-Disposition“]
tangdou369098655的博客
06-15 7481
遇到这种报错一般在于下载文件时候，如果Content-Disposition设置文件名有中文会出现此种问题，解决方案如下： 把第二段代码改为第一段，即可~~ 'Content-Disposition': 'attachment; filename=' + encodeURIComponent(fileName), //告诉浏览器这是一个需要下载的文件,之所以使用这个，是为了避免下载中文名字的文件出问题 // 'Content-Disposition': 'attachment; filename=' + f
response.setHeader("Content-disposition", "attachment; filename=" + URLEncoder.encode(name, "UTF-8")); response.setHeader("Content-Length", String.valueOf(fileLength)); bos = new BufferedOutputStream((OutputStream)response.getOutputStream()); download(path, name, bos);前端vue获取filename
06-09
在前端Vue中，可以通过axios来发送GET请求，然后在请求的响应中获取到Content-Disposition响应头中的filename值，示例如下： ``` axios.get('/download').then(response => { const contentDisposition = response.headers['content-disposition'] const matchResult = contentDisposition.match(/filename="(.+)"/) if (matchResult) { const filename = matchResult[1] // 使用获取到的filename进行后续操作 } }) ``` 其中，/download为后端提供文件下载的接口地址，response.headers['content-disposition']获取到Content-Disposition响应头的值，然后使用正则表达式匹配出filename值即可。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值