『HTTP知识点』什么是HTTP协议？（HTTP协议详解）

面试问题汇总：

1. 谈一下什么是HTTP协议？
2. 谈一下请求、请求报文？
3. 谈一下响应报文？
4. HTTP请求/响应的步骤是什么，简单说一下？
5. get和post请求有什么区别，简单谈一下？
6. 简单说一下抓包工具？

1-什么是HTTP 协议

即超文本传输协议，网站是基于HTTP协议的，例如网站的图片、CSS、JS等都是基于HTTP协议进行传输的。

• HTTP协议是由从客户机到服务器的请求(Request)和从服务器到客户机的响应(Response)进行了约束和规范。
• 即HTTP协议主要由请求和响应构成。
  

http协议原理图示

2-什么是请求|请求报文

常用请求方法 POST、GET、PUT、DELETE
请求由客户端发起，其规范格式为：请求行、请求头、请求主体。

• 请求行
  
  由请求方式、请求URL和协议版本构成
• 请求头
  • Host：localhost请求的主机
  • Accept：/ 接受的文档MIME类型
  • User-Agent：很重要
  • Referer：从哪个URL跳转过来的
  • Accept-Encoding：可接受的压缩格式
• 请求主体
  即传递给服务端的数据
  注：当以post形式提交表单的时候，请求头里会设置
  Content-Type: application/x-www-form-urlencoded，以get形式当不需要
  • 特殊的请求头介绍：
  • Content-Type:""
  • referer: 请求头
  • refresh 响应头
  • Content-Type: 响应头

get请求报文

  GET http://localhost:3000/?username=123&password=456 HTTP/1.1
  Host: localhost:3000
  Connection: keep-alive
  Upgrade-Insecure-Requests: 1
  User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/77.0.3865.90 Safari/537.36
  Sec-Fetch-Mode: navigate
  Sec-Fetch-User: ?1
  Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3
  Sec-Fetch-Site: none
  Accept-Encoding: gzip, deflate, br
  Accept-Language: zh-CN,zh;q=0.9
  Cookie: Webstorm-ef037c84=6dd4cb30-4200-4430-b5a8-a4ca17524f5d
  If-None-Match: W/"25-SfBxcqQTxSsstDatHQMe/b3IUyc"

• 请求首行
  GET http://localhost:3000/?username=123&password=456 HTTP/1.1
  • GET 请求方式
  • http://localhost:3000/?username=123&password=456 请求地址（包含请求参数）
  • HTTP/1.1 协议名/版本号
• 请求头
  • Host: localhost:3000 请求主机地址
  • Connection: keep-alive 保持长连接
  • Upgrade-Insecure-Requests: 1 允许使用https协议
  • User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/77.0.3865.90 Safari/537.36 用户代理：浏览器版本
  • Sec-Fetch-Mode: navigate
    Sec-Fetch-User: ?1
    Sec-Fetch-Site: none
    Accept:
    text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,/;q=0.8,application/signed-exchange;v=b3 浏览器允许接受的数据格式
    - text/plain 纯文本
    - text/html html文件
    - application/xhtml+xml xhtml文件
    - application/xml xml数据格式
    - application/json json格式
    - application/x-www-form-urlencoded form表单提交格式
  • Accept-Encoding: gzip, deflate, br 浏览器允许压缩格式
  • Accept-Language: zh-CN,zh;q=0.9 浏览器允许语言
  • Cookie: Webstorm-ef037c84=6dd4cb30-4200-4430-b5a8-a4ca17524f5d
    If-None-Match: W/“25-SfBxcqQTxSsstDatHQMe/b3IUyc”
    缓存
• 空行：最后一个请求头之后是一个空行，发送回车符和换行符，通知服务器以下不再有请求头
• 请求体：请求包体不在 GET 方法中使用，而是在POST 方法中使用。POST 方法适用于需要客户填写表单的场合。与请求包体相关的最常使用的是包体类型 Content-Type 和包体长度 Content-Length

---

post请求报文

  POST http://localhost:3000/ HTTP/1.1
  Host: localhost:3000
  Connection: keep-alive
  Content-Length: 26
  Cache-Control: max-age=0
  Origin: http://localhost:63342
  Upgrade-Insecure-Requests: 1
  Content-Type: application/x-www-form-urlencoded
  User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/77.0.3865.90 Safari/537.36
  Sec-Fetch-Mode: navigate
  Sec-Fetch-User: ?1
  Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3
  Sec-Fetch-Site: same-site
  Referer: http://localhost:63342/class0708-git/nodejs/day04/form.html?_ijt=e83ln6s23qvq8beejkp1j4rn14
  Accept-Encoding: gzip, deflate, br
  Accept-Language: zh-CN,zh;q=0.9
  Cookie: Webstorm-ef037c84=6dd4cb30-4200-4430-b5a8-a4ca17524f5d
  username=jack&password=123

• 请求首行
  POST http://localhost:3000/ HTTP/1.1
• 请求头
  • Host: localhost:3000
    Connection: keep-alive
    Content-Length: 26 长度
  • Cache-Control: max-age=0 缓存
  • Origin: http://localhost:63342 请求来源的地址
  • Upgrade-Insecure-Requests: 1
    Content-Type: application/x-www-form-urlencoded
    请求体类型表单数据
  • User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64)
    AppleWebKit/537.36 (KHTML, like Gecko)
    Chrome/77.0.3865.90 Safari/537.36
    Sec-Fetch-Mode: navigate
    Sec-Fetch-User: ?1
    Sec-Fetch-Site: same-site
    Accept:
    text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,/;q=0.8,application/signed-exchange;v=b3
    Referer: http://localhost:63342/class0708-git/nodejs/day04/form.html?_ijt=e83ln6s23qvq8beejkp1j4rn14
    请求来源的完整地址：防盗链、广告计费
  • Accept-Encoding: gzip, deflate, br
    Accept-Language: zh-CN,zh;q=0.9
    Cookie: Webstorm-ef037c84=6dd4cb30-4200-4430-b5a8-a4ca17524f5d
• 空行:最后一个请求头之后是一个空行，发送回车符和换行符，通知服务器以下不再有请求头
• 请求体
  • POST 方法适用于需要客户填写表单的场合。与请求包体相关的最常使用的是包体类型 Content-Type 和包体长度 Content-Length;
  • username=jack&password=123
    • 请求体参数（地址栏不可见，相对安全，post请求）
  • ?username=jack&password=123
    • 查询字符串（地址栏可见，get请求）

3-响应报文

响应由服务器发出，其规范格式为：状态行、响应头、响应主体。

  HTTP/1.1 200 OK
  X-Powered-By: Express
  Content-Type: text/html; charset=utf-8
  Content-Length: 31
  ETag: W/"1f-90g2D083lUkGh0x222x0zJGkv/w"
  Date: Sat, 12 Oct 2019 06:36:56 GMT
  Connection: keep-alive
  这是处理get请求的响应~

响应首行（状态行）

• HTTP/1.1 200 OK
• 200 响应状态码
  
  • 1xx: 请求还未完成，还需进一步处理
  • 2xx: 请求成功 200
  • 3xx: 请求重定向（请求的资源这里没有，需要去其他地方找）
    302 请求资源在其他地方(请求重定向)
    304 请求资源重定向缓存中
  • 4xx：请求资源未找到 404
    403没有权限
  • 5xx：服务器内部错误 500

响应头

• X-Powered-By: Express
• Content-Type: text/html; charset=utf-8
  响应体类型（响应资源的MIME类型）
• Content-Length: 31
  响应体长度
• ETag: W/“1f-90g2D083lUkGh0x222x0zJGkv/w”
  缓存
• Date: Sat, 12 Oct 2019 06:36:56 GMT
  日期
• Connection: keep-alive
• Server：服务器信息

MIME是标识文件类型的，文件后缀并不能正确无误的标识文件的类型。
客户端与服务器在进行数据传输的时候都是以字节形式进行的，咱们可以理解成是以“文本形式”传输，这时浏览器就需要明确知道该怎么样来解析这些文本形式的数据，MIME就是明确告知浏览器该如何来处理。

空行

• 最后一个响应头部之后是一个空行，发送回车符和换行符，通知服务器以下不再有响应头部。

响应体

• 这是处理get请求的响应（即服务端返回给客户端的内容）

HTTP 请求/响应的步骤：

• 客户端连接到web服务器：HTTP 客户端与web服务器建立一个 TCP 连接;
• 客户端向服务器发起 HTTP 请求：通过已建立的TCP 连接，客户端向服务器发送一个请求报文;
• 服务器接收 HTTP 请求并返回 HTTP 响应：服务器解析请求，定位请求资源，服务器将资源副本写到 TCP 连接，由客户端读取;
• 释放 TCP 连接：若connection 模式为close，则服务器主动关闭TCP 连接，客户端被动关闭连接，释放TCP 连接;若connection 模式为keepalive，则该连接会保持一段时间，在该时间内可以继续接收请求;
• 客户端浏览器解析HTML内容：客户端将服务器响应的 html 文本解析并显示;

举个栗子：经典面试题 『从地址栏输入url地址到页面最终渲染完成，经历了什么？』

4-get 请求与post 请求区别

1. get 发送的数据都在地址栏当中，不安全
2. get 发送的数据对数据大小由限制。
3. get 没有请求体
4. post 发送的数据在请求体当中，相对安全
5. post 对请求的数据的大小没有限制
6. post 有一个特殊的请求头 Content-Type:application/x-www-form-urlencoded
7. get 的请求头相对较少，性能稍微要高一些

5-调试工具

利用HTTP抓包工具在开发中可以帮我们进行调试，常用抓包工具HttpWatch、Fiddler、Charles、FireBug等。

• 浏览器插件
  • Firebug、HttpWatch、chrome dev tools
• 代理软件
  • Charles、Fiddler

6-总结

• 这篇文章主要讲了HTTP是什么、请求报文、响应报文以及一些附加的知识点，希望聪明的你可以理解HTTP协议了。
• 愿你在这个代码繁杂、头发渐秃的编码世界里，可以温暖自己，坚持学习。

生而为人，怎敢不努力，愿你在编码的路上温暖自己，坚持学习。

---

『传送门』✈『HTTP知识点』从地址栏输入url地址到页面最终渲染完成，经历了什么？
『传送门』✈ 什么是TCP三次握手和四次挥手【一文详解】
『传送门』✈ HTTP缓存机制与原理详解