axios获取header中的信息_axios无法获取响应header的Content-Disposition字段【转载】

在axios中遇到无法通过响应拦截器获取Content-Disposition字段的问题。原因在于浏览器的安全策略限制,默认只能访问六种简单响应首部。解决办法是后端设置Access-Control-Expose-Headers,明确暴露Content-Disposition,使客户端能够成功获取。
摘要由CSDN通过智能技术生成

1、问题情景

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

但是通过查看控制台,header里确实有这个属性:

443fb41077617263dead76a8cc3302a9.png

在控制台Network里明明能看到,但是在响应拦截器里用js headers["content-disposition"]来获取,但是打印 header对象里并没有content-disposition,无法获取,这是什么原因?

2、原理(病灶)Access-Control-Expose-Headers

默认情况下,header只有六种 simple response headers (简单响应首部)可以暴露给外部:

Cache-Control

Content-Language

Content-Type

Expires

Last-Modified

Pragma

这里的暴露给外部,意思是让客户端可以访问得到,既可以在Network里看到,也可以在代码里获取到他们的值。

上面问题提到的content-disposition不在其中,所以即使服务器在协议回包里加了该字段,但因没“暴露”给外部,客户端就“看得到,吃不到”。

而响应首部 Access-Control-Expose-Headers 就是控制“暴露”的开关,它列出了哪些首部可以作为响应的一部分暴露给外部。

所以如果想要让客户端可以访问到其他的首部信息,服务器不仅要在heade里加入该首部,还要将它们在 Access-Control-Expose-Headers 里面列出来

3、解决

后端:

52f4b01006e1cf282a52981740a0c664.png

成功设置后,服务台Network可以看到:

cf4927b6e5c366610c3cc685dba6278f.png

这样一来,js就能获取到响应header的Content-Disposition字段的值了

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值