置百丈玄冰而崩裂,掷须臾池水而漂摇。

axios无法获取响应头headers的自定义信息

前端 强强

Vue项目中使用axios无法获取响应头headers的自定义信息

在前后端通讯是经常会传递token到前端,用header交互,但是在axios中获取不到对应的信息

console.log(response.headers)


原因:

根据MDN文档: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 里面列出来。


解决方法

后端设置给前端梯提取

HttpContext.Response.Headers.Add("Access-Control-Expose-Headers", "token");
HttpContext.Response.Headers.Add("token", token);

这样前端就可以取到了


发表评论:

验证码