前端 JS 获取 Header 有两种方式
-
方式一
xhr.getAllResponseHeaders() // 获取所有的header
-
方式二
xhr.getResponseHeader("key") // 获取指定的header
首先我们需要在服务端添加自定义的 Header
response.addHeader("tokenKey", "tokenValue");
前端使用 axios 发送请求,响应结果如下
let allHeaders = response.request.getAllResponseHeaders();
console.log(allHeaders);
打印结果如下
content-type: application/json;charset=UTF-8
我们发现打印结果中并没有我们自定义的 Header
我们通过另一种方式直接获取指定的 Header
response.request.getResponseHeader("tokenKey");
浏览器控制台报错信息如下
Refused to get unsafe header "tokenKey"
错误信息的意思就是说拒绝获取不安全的响应头
以上两种方式,我们再通过浏览器的开发者工具查看请求的响应头,却是存在的
为什么请求中的 Header
存在,但是却获取不到呢?
再 MDN Web 文档中有如下表述
表述的非常清楚,我们需要将允许浏览器访问的头放入白名单
服务端修改如下所示
response.addHeader("tokenKey", "tokenValue");
response.addHeader("Access-Control-Expose-Headers", "tokenKey");
前端再次获取自定义 Header
,发现已经成功了
参考资料: