js如何获取response header中字段

问题描述

和公司某部门对个需求，需要获取他们的token，本想着顶多调用个取token的接口。

结果部门同事表示: 接口是有，得上点强度，token在接口的response header中获取。

？？？

好吧，虽然感觉非常离谱，但是与其和他battle为什么不在接口body返回，不如先自己尝试一下，之前还这没这么获取过。

操作过程

真别说，还真有这个方法，在MDN上找到了getAllResponseHeaders

用原生的XMLHttpRequest整个demo试试：

模拟一个tokenApi请求，并获取接口返回头中的token字段

    function getResponseHead() {
        return mockRequest.getAllResponseHeaders();
    }
    
    function addListeners(xhr) {
        xhr.addEventListener('loadend', getResponseHead);
    }

    const mockRequest = new XMLHttpRequest();
    mockRequest.open('post', "tokenApi");
    mockRequest.send();

感觉这波拿下了。

结果一看返回值：

只有cache-control content-type两个值，但是network中在response header中确实有token字段。

然后不知道为啥，又试了试同步请求调用：

const mockRequest = new XMLHttpRequest();
mockRequest.open('post', "tokenApi", false);
mockRequest.send();
const header = mockRequest.getAllResponseHeaders();

还是只能获取到上面两个字段。 = =

经过查找发现了新（知道）的http字段Access-Control-Expose-Headers

根据MDN的描述，http默认只暴露下面7个response header供获取

除非在response header中携带Access-Control-Expose-Headers字段，例如：

Access-Control-Expose-Headers: Content-Encoding
// Authorization字段要暴露的话必须写上
Access-Control-Expose-Headers: *, Authorization

可以，看到这个直接心安理得抛给后端了，打卡下班。