HTTP报文的组成
所有的HTTP事务都可以在浏览器的控制台的Network来查看.
每一次HTTP事务的HTTP报文大致都包含一下内容

  • 起始行：请求起始行、响应起始行
  • 首部（头）Headers：请求头、响应头、通用头
  • 主体：请求主体、响应主体

1.首部(头)

General

通用头

  1. Request URL: https://www.baidu.com/  请求地址
  2. Request Method: GET  请求方式:GET/POST/DELETE/PUT/HEAD/OPTION...
  3. Status Code: 200 OK   响应的HTTP状态码
  4. Remote Address: 111.13.100.92:443  主机地址(服务器外网IP地址)
  5. Referrer Policy: no-referrer-when-downgrade

Request Headers

请求头 [客户端设置，服务器接收]

  1. GET / HTTP/1.1  =>起始行(描述当前请求的一些基本信息：用的是1.1版本传输协议进行内容传输的)
  2. Host: www.zhufengpeixun.cn
  3. Connection: keep-alive
  4. Cache-Control: max-age=0
  5. Upgrade-Insecure-Requests: 1
  6. User-Agent: Mozilla/5.0 (Windows NT 6.3; Win64; x64) 
  7.     AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.139
  8.     Safari/537.36
  9. Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8
  10. Accept-Encoding: gzip, deflate
  11. Accept-Language: zh-CN,zh;q=0.9
  12. Cookie: ... =>cookie信息一般都是放到头文件中实现和服务器端的数据通信的
  13. If-Modified-Since: Sun, 06 May 2018 10:02:42 GMT

Response Headers

响应头 [服务器端设置，客户端获取]

  1. HTTP/1.1 304 Not Modified  =>响应起始行（HTTP状态码）
  2. Date: Tue, 22 May 2018 09:18:56 GMT  
  3.     //=>服务器响应内容时候的“服务器端时间”（客户端获取这个时间的时候已经和
  4.     //=>真实的时间产生误差了，因为服务器返回内容到客户端接收到，也是需要时
  5.     //=>间的），并且这个时间是格林尼治时间（比北京时间慢8小时，北京时间是
  6.     //=>GMT+0800）
  7. Connection: keep-alive
  8. ETag: "700a6f-17f43-56b86a77513d3"
  9. Vary: Accept-Encoding,User-Agent
  10. Server: yunjiasu-nginx  //=>管理WEB服务的工具
  11. CF-RAY: 41ee32c192db66b8-TSN

2.主体

Response

[响应主体]
服务器返回的是啥就是啥
但是只有代码有响应主体,响应主体也就是代码本身.一般资源文件是没有响应主体的

Request Payload / Form Data

[请求主体]
客户端传递给服务器的内容
比如说你在一个输入栏输入内容后,查看Network的Response会立即有一个请求

3.如何处理Bug

3.1寻找Bug的步骤

了解HTTP报文以及如何查看对未来工作开发和BUG调试至关重要
涉及到交互功能（前端<=>后台）出现问题，都按照如下方式查找问题原因

打开控制台，在NET-WORK中找到当前交互的请求地址，点击进去看详情

  1. 如果是传递给服务器的参数或者方式错误 [前端问题]
  2. 如果服务器返回的信息有错误或者和API接口文档规定的内容不一样 [后台问题]
  3. 如果返回数据是对的，但是展示有问题 [前端问题]

3.2.调试Bug的方法

确定是自己前端的问题后，基于断点(或者代码中的debugger)或者控制台输出等方式，开始逐步调试即可

3.3.客户端和服务器端信息交互的方式

3.4.客户端传递给服务器

  1. 问号传参

请求的URL地址末尾通过问号传参方式，把一些信息传递给服务器
/stu/info?id=12&lx=man

  1. 设置请求头

客户端把需要传递给服务器的内容设置到请求头信息中（自定义请求头）,服务器可以通过接收请求头信息把内容得到

  1. 设置请求主体

xhr.send([AJAX SEND中传递的内容，就是客户端设置的请求主体内容，服务器端可以接收到这些信息的]);

3.5.服务器返回给客户端

  1. 设置响应头信息

例如把服务时间通过响应头返回给客户端，客户端通过获取响应头信息得到这个时间（响应头返回的速度是优先于响应主体的）

  1. 设置响应主体

主要的返回信息都在响应主体中