1. 每个 HTTP 请求和响应都会携带一些头部字段,这些字段可能会对开发者有用.
2. 默认情况,XHR 请求会发送一些常见字段:
【1】Accept:浏览器可以处理的内容类型.
【2】Accept-Charset:浏览器可以显示的字符集
【3】Accept-Encoding:浏览器可以处理的压缩编码格式
【4】Connection:浏览器与服务器连接类型
【5】Accept-Language:浏览器使用的语言
【6】Host:发送请求的页面的域名
【7】Cookie:页面中设置的Cookie
【8】Referer:发送请求的页面的URI
【9】User-Agent:浏览器用户代理字符串
下面是一个个人向 json-server 服务器发送 XHR 请求的示例:
Request Headers:
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9 Accept-Encoding: gzip, deflate, br Accept-Language: zh-CN,zh;q=0.9 Connection: keep-alive Cookie: Webstorm-bf00c0e6=36b945d7-5d09-4525-b9ce-14800daaf4d0 Host: localhost:3000 If-None-Match: W//"73f-71V+7jQgFOPkmUv67NROh1acCqM" Referer: http:/localhost:3000/ User-Agent: Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/94.0.4606.71 Mobile Safari/537.36
3. 如果希望发送额外字段,可以使用 setRequestHeader() 方法,为保证请求头部被发送,必须在 open() 之后、send() 之前调用 setRequestHeader(),并且自定义头部不要和浏览器正常发送的头部重名,否则会影响浏览器正常响应.
4. 可以使用 getResponseHeader() 方法从 XHR 对象获取响应头部,如果想取得所有响应头部,可以使用 getAllResponseHeaders() 方法,以下是获取所有响应头部代码以及返回结果.
/* xmlhttprequest 不是 node 内置,因此需要 npm install xmlhttprequest,并手动导入 */ let XMLHttpRequest = require('xmlhttprequest').XMLHttpRequest; let xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState === 4) { if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) { console.log(xhr.responseText); let all = xhr.getAllResponseHeaders(); console.log(all); } else { console.log("Request was unsuccessful: " + xhr.status); } } }; xhr.open("get", "http://localhost:3000/posts", true); xhr.send(null);
x-powered-by: Express vary: Origin, Accept-Encoding access-control-allow-credentials: true cache-control: no-cache pragma: no-cache expires: -1 x-content-type-options: nosniff content-type: application/json; charset=utf-8 content-length: 77 etag: W/"4d-49G7XbVRP2NKipc5uj9Z4hcUq3Y" date: Fri, 01 Oct 2021 05:59:55 GMT connection: close