XMLHttpRequest 跨域请求获取 Response Header

前端 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，发现已经成功了

参考资料：

• MDN Web

• 你真的会使用XMLHttpRequest吗？