以新华智云的招聘模块为例子

打开控制台，查看请求列表：

浏览器发送请求列表
会发现有各式各样的请求，因为图片挂在CDN上，所以图片的请求占了很大一部分。选择一个异步请求：

异步请求
这是一个获取岗位信息的接口，将会分成General、Request Headers、Response Headers、三部分去剖析浏览器里的内容。

General

General.png

Request URL: https: //hr.xinhuazhiyun.com/api/u1/jobs $\color{#db5a6b}{接口的 url}$
Request Method: GET $\color{#db5a6b}{请求方法为GET}$
Status Code: 200 $\color{#db5a6b}{返回状态码}$
Remote Address: 114.55.185.1:443
$\color{#db5a6b}{服务器的地址、端口号}$
Referrer Policy: strict-origin-when-cross-origin $\color{#db5a6b}{从哪个页面发起该请求}$ ，当发请求给同源网站时，浏览器会在referrer中显示完整的URL信息，发个非同源网站时，则只显示源地址（协议、域名、端口），但不允许referrer信息显示在从https网站到http网站的请求中（安全降级）。

状态码

常见的状态码有以下几种。

1xx：临时回应，表示客户端请继续。
2xx：请求成功。
200：请求成功。
3xx: 表示请求的目标有变化，希望客户端进一步处理。
301&302：永久性与临时性跳转。
304：跟客户端缓存没有更新。
4xx：客户端请求错误。
403：无权限。
404：表示请求的页面不存在。
418：It’s a teapot. 这是一个彩蛋，来自 ietf 的一个愚人节玩笑。（超文本咖啡壶控制协议）
5xx：服务端请求错误。
500：服务端错误。
503：服务端暂时性错误，可以一会再试。

对我们前端来说，1xx 系列的状态码是非常陌生的，原因是 1xx 的状态被浏览器 HTTP 库直接处理掉了，不会让上层应用知晓。

2xx 系列的状态最熟悉的就是 200，这通常是网页请求成功的标志，也是大家最喜欢的状态码。

3xx 系列比较复杂，301 和 302 两个状态表示当前资源已经被转移，只不过一个是永久性转移，一个是临时性转移。实际上 301 更接近于一种报错，提示客户端下次别来了。

304 产生这个状态的前提是：客户端本地已经有缓存的版本，并且在 Request 中告诉了服务端，当服务端通过时间或者 tag，发现没有更新的时候，就会返回一个不含 body 的 304 状态。

Request Headers

key	说明
accept	浏览器端接受的格式
accept-encoding	浏览器端接受的编码方式
accept-language	浏览器端接受的语言，用于服务端判断多语言
cache-control	控制缓存
if-modified-since	上次访问的更改时间，如果服务端认为此时间后自己没有更新，则会给出 304 响应
if-none-match	上次访问时使用的 E-Tag ，通常是页面的信息摘要，比更改时间更准确
user-agent	客户端标识

Response Headers

key	说明
access-control-allow-origin	允许跨域访问资源的域
cache-control	控制缓存
content-encoding	内容编码方式，通常是 gzip
content-length	内容的长度，有利于浏览器判断内容是否已经结束
content-type	内容类型，所有请求网页的都是 text/html
date	当前的服务器日期
etag	资源信息摘要，用于判断是否需要重新到服务端获取资源
expires	过期时间，用于判断下次请求是否需要到服务端获取资源
last-modified	页面上次修改的时间
server	服务端软件的类型
set-cookie	设置 cookie，可以存在多个
via	服务端的请求链路，对于某些调试场景至关重要。