axios拦截器中获取不到自定义的响应头 | 我的日常分享

axios拦截器中获取不到自定义的响应头

发表于2023-01-06更新于2023-01-06字数统计253阅读时长3分

axios拦截器中获取不到自定义的响应头

1、问题描述

加密接口时，添加加密标识，方便客户端知道这是加密接口，对数据进行解密，在客户端无法获取到自定义的响应头标识。

拦截器代码：

1
2
3
4
// respone拦截器
request.interceptors.response.use(response=>{
  console.log(response)
})

后端代码：

image-20230106170601007

打印出来发现只有content-type:"application/json"

image-20230106170803689

但是在响应标头中是有encrypt:true

image-20230106171207499

2、原因&解决

根据MDN文档：Access-Control-Expose-Headers

默认情况下，header只有六种 simple response headers （简单响应首部）可以暴露给外部：

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

所以虽然浏览器中响应标头能够看到，但是客户端程序中无法获取。

后台中响应头添加：

1
2
response.getHeaders().add("Access-Control-Expose-Headers", "encrypt");
response.getHeaders().add("encrypt", "true");

image-20230106171658796

成功获取到响应头：

image-20230106171734499