HTTP协议之自定义headers参数



近期和我司服务端对接时发现藏在headers里的参数,并不是HTTP的response里的常规参数。几经折腾后发现是自定义的参数。供前端ajax调用时提取使用。

Before

  • 在工作时常常有获取列表的接口,就必然会涉及获取到的数组的长度,即页数。
  • 讲道理,将返回的数组内容和总数量一起返回并不太合理,就像一本书不会在每一页上都标明总页数,而是在书的最开始或者末尾有说明。所以秉着内容和页数不应存放在一起的原则,服务端同事将列表的总页数放在了response的headers里。
  • 所以问题是如何从response headers获取相应参数。

详情

  • 查找了部分文档后找到了Access-Control-Expose-Headers这个参数。
  • The Access-Control-Expose-Headers response header indicates which headers can be exposed as part of the response by listing their names.
  • 它表明了哪些参数是可以用名字展示在response的header里的——这里的展示应当理解为前端可以获取,而不是单纯的显示。
  • 默认是展示6个参数:

    • Cache-Control
    • Content-Language
    • Content-Type
    • Expires
    • Last-Modified
    • Pragma
  • 也可以展示其他参数。通过以下方式设置:

    • Access-Control-Expose-Headers: Content-Length
  • 甚至自定义参数:

    • Access-Control-Expose-Headers: X-Resource-Count, Content-Length
  • 这样当服务端传了X-Resource-Count时在前端就可以取到X-Rource-Count的值。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
1.在angular中获取
$http.get(`${url}/getLists/`)
.then((res) => {
// 可以获取到
console.log(res.headers('X-Resource-Count'));
});

2.在jquery中获取
$.ajax({
url: `${url}/getLists`,
type: 'GET',
contentType: 'application/json;charset/utf-8',
})
.done((data, textStatus, jqXHR) => {
console.log(jqXHR.getResponseHeader('X-Resource-Count'));
});

3.原生ajax
if (window.XMLHttpRequest) { // Mozilla, Safari. IE7+
httpRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE 6 and older
httpRequest = new ActiveXObject('Microsoft.XMLHTTP');
}
httpRequest.onreadystatechange = () => {
if (httpRequest.readyState === XMLHttpRequest.DONE) {
if (httpRequest.statue === 200) {
// something...
} else {
// error
}
}
};
httpRequest.open('GET', `${url}/getLists`);
______________________________________________________________
function getHeaderCount() {
console.log(this.getResponseHeader('X-Resource-Count'));
}
httpRequest.onload = getHeaderCount;
______________________________________________________________
httpRequest.send();

  • 这样就可以愉快地使用X-Resource-Count了。

参考:[Access-Control-Expose-Headers](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Expose-Headers)

Ajax

微信内置浏览器兼容性问题汇总 如何清除input元素自定义样式

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×