HTTP协议讲解，请求报文与响应报文都是什么？网络控制台查看HTTP请求

最新推荐文章于 2024-09-30 17:57:44 发布

程序猿ZhangSir

最新推荐文章于 2024-09-30 17:57:44 发布

阅读量576

点赞数 25

分类专栏：前端文章标签：网络 http 网络协议

本文链接：https://blog.csdn.net/m0_70325779/article/details/142463106

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

2.2.1 Host：主要用来实现虚拟主机技术

2.2.2 Cookie：一种让浏览器帮忙携带信息的手段

2.2.3 Content—type：资源的媒体类型

2.2.4 User-Agent：发送请求的浏览器类型和版本

4.1.2 Request Headers和Reponse Headers

4.1.3 Response Body

4.2 Source

4.3 console

一. HTTP解析

HTTP全称(hypertext transport protocol)，译为 "超文本传输协议"，协议详细规定了浏览器和万维网服务器之间互相通信的规则，也可以理解为约定。

很好理解，我们把浏览器和万维网分别当成张三和李四，他们两个在进行交流的时候，一定要说同一种语言，比如都说中文，或者都说英文，这样才能很好的进行沟通交流；不能一个人说中文，另一个人说英文，语言不通，会导致沟通交互阻塞，双方不知道对方在说什么。因此，在互联网中，我们自然要制定一种通信规则，也可以称之为协议，所有人都遵循这一协议去进行沟通交互，这样一来极大地提高了大家的沟通效率。

二. 请求报文

举个例子。A与B使用互联网进行交流，A向B发送的内容就是请求报文，B返回给A的内容就是响应报文。A与B交互这一动作就可以理解为用户和服务器，用户向服务器发送请求，服务器响应用户的请求返回内容。

请求报文包含"行"、"头"、"空行"、"体" 四部分，下面我对它们分别进行解析；

2.1 请求行

请求报文行包含三部分。

2.1.1 请求类型

常见的有GET(查询请求)、POST(修改请求)、DELETE(删除请求)、PUT(添加请求)。但实际开发过程中，GET和POST居多，POST还代替GET、DELETE和PUT，只用POST请求也可以完成增删改查四种操作。

2.1.2 请求URL路径

我随便打开一个网站，如下，划线的部分就是URL的部分路径，蓝线的部分就是请求参数，浏览器会帮我们把参数拼接到URL后面，参数也是属于URL的一部分的哦。

2.1.3 发送的HTTP请求的版本

有HTTP1.0、HTTP1.1、HTTP2.0、HTTP3.0。每个版本的内容和技术都略有不同，如果想要详细了解可以查询相关的博文

2.2 请求头

请求头包含了很多东西，这里我挑几个非常常见的来简单说明一下。

2.2.1 Host：主要用来实现虚拟主机技术

举个例子，在一台电脑上，我部署了淘宝、京东，拼夕夕三个服务；各自运行于8080、8081、8082端口。

那么我现在提问，如果我想要在互联网中访问淘宝这个服务，该怎么访问？答案很简单，只需要获取到我本地服务器的IP地址就可以了，然后通过 "IP地址+8080" 就可以访问到淘宝服务；

那么再提问，淘宝这个大服务之下有众多功能，比如购物车，浏览物品，下单支付，我要访问这些小的功能，该怎么访问？

此时我们就会发现，IP+端口只能访问到某个服务，但无法访问到这个服务之下的其它目录功能(网站)。而 Host 技术就帮我们解决了这个烦恼，虚拟主机可以理解为共享主机，它是一种技术，它会将一台完整的服务器分成若干个主机，因此可以在单一主机上运行多个网站或服务。

当我们的服务无法通过 IP+端口的形式来访问时，就可以使用Host来进行定位，Host请求头决定了我们访问哪个虚拟主机，Host是唯一客户端必须携带的请求头，如果缺失则会返回 400 状态码。在 HTTP2.0 以及 HTTP3.0 中，则是一个伪头 :authority 代替。

2.2.2 Cookie：一种让浏览器帮忙携带信息的手段

常常用来存储一些保密级别不是特别高但是又经常需要用到的信息，或者协助Web保持状态。

Cookie有非常多属性，这里我挑两个最最最重要的，HttpOnly和Secure。

Secure标记为 Secure 的 Cookie 只应通过被 HTTPS 协议加密过的请求发送给服务端，HttpOnly设置了 HttpOnly属性的 cookie 不能使用 JavaScript 经由 Document.cookie属性、XMLHttpRequest 和 Request APIs、Cookie Store APIs进行访问。

2.2.3 Content—type：资源的媒体类型

比较常见的类型是"application/json"，告诉浏览器这是一个 JSON 数据；

下面几种也可以了解一下：

"text/html" 和 "application/json" 是 MIME 类型，而 "html" 和 "json" 是扩展名；

"text/html; charset=utf-8" 表示这是一个 HTML 文档，并且使用 UTF-8 编码；

"application/pdf; name=example.pdf; size=1024" 表示这是一个 PDF 文件，并且文件名为 example.pdf，并且文件大小为 1024 字节；

2.2.4 User-Agent：发送请求的浏览器类型和版本

User-Agent 的值通常由浏览器自动生成，并在每次请求时发送给服务器。服务器可以使用 User-Agent 来确定客户端的类型和版本，从而提供相应的响应。

例如，当用户使用 Chrome 浏览器访问一个网站时，Chrome 浏览器会生成一个 User-Agent 字段，其值可能类似于以下内容：

Mozilla/5.0 ------表示这是一个 Mozilla 浏览器；

(Windows NT 10.0; Win64; x64)------表示操作系统是 Windows 10，64 位；

AppleWebKit/537.36(KHTML, like Gecko)-------表示浏览器渲染引擎是 WebKit，版本是 537.36；

Chrome/58.0.3029.110------表示浏览器是 Chrome，版本是 58.0.3029.110；

Safari/537.3------表示浏览器是 Safari，版本是 537.3；

2.3 请求空行

这里是空行，属于一种固定格式，必须有；

2.4 请求体

就是我们常说的请求体。需要注意的是，GET请求的请求体是空的。POST、PUT、DELETE类型的请求通常请求体不为空。

发送POST请求时，常常会把实体参数写在请求体中传递给后端；

三. 响应报文

响应报文与请求报文非常类似，也是包含"行"、"头"、"空行"、"体"四部分；它与请求报文有些类似，但也略有不同，我们一起来看看吧。

3.1 响应行

响应行中，主要包含三部分，包含HTTP版本、HTTP响应状态码、响应状态字符串；版本在上面已经说过了。

响应状态码大家或许都见过，就是200，404，405，500这些就是状态码，想详细了解的小伙伴们可以去看我的另一篇，链接如下

开发常见的http状态码.——400，401，403，404，500，501，503，状态码大全！_400响应码-CSDN博客文章浏览阅读1.7k次，点赞4次，收藏12次。服务器拒绝用户请求，有可能因为用户的权限不足，没有相应的访问权限，紧接着刚才的401，401是用户没有验证身份，如果用户验证了身份，但是没有访问权限，就会爆出403。示意请求者应当继续发送请求，客户端返回此码表示请求有效，但是请求不完整，服务器只接收到了一部分，用户应当继续发送剩余部分；服务器目前从不同的网页位置响应请求，表示资源被临时分配到了新的URL，但请求者无需任何操作，可继续使用原来的位置进行请求。请求的网页已经被永久的移动到了其他位置，资源分配到了新的URL，服务器也会随之重定向至新的网页位置。_400响应码https://blog.csdn.net/m0_70325779/article/details/138962308?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522AE816309-5FB4-4AFB-A654-1850E375AA53%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=AE816309-5FB4-4AFB-A654-1850E375AA53&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~rank_v31_ecpm-2-138962308-null-null.nonecase&utm_term=http&spm=1018.2226.3001.4450响应状态字符串与响应状态码可以说是配套的，同学们可以简单的理解为状态码是对当前相应的描述；

比如响应状态码"200"，响应状态字符串就是"OK"；

响应状态码"404"，响应状态字符串就是"没有找到对应资源"；

3.2 响应头

响应头中则是存储了一些对响应体的描述；

常见的有：Content-Type：text/html；charset=utf-8；表示响应文本的类型

Content-length：2048；表示响应文本的长度

Content-encoding：gizp；表示响应文本的压缩方式

3.3 响应空行

空行与请求空行一样是固定格式；

3.4 响应体

响应体则是主要的返回结果，通常是返回下面这种HTML文本，然后浏览器将响应体中文本获取到再进行解析，渲染到浏览器页面得以让用户浏览；

<html>
    <head>
        ......
    </head>
    <body>
        <h1>...<h1>
        <form>...</form>
        ......
    </body>
</html>

四. 网络控制台

我们作为开发人员，调试前后端接口时通常需要到浏览器控制台页面去进行查看，通过HTTP请求的请求头请求体，响应头响应体就可以知道我们的接口是在哪一步出现了问题以便进行修改；

随便找一个网站，点击键盘F12即可打开控制台，如下图所示，可以看到上面有一排选项，对于开发人员来说，最熟悉的就是"console"、"Source"、"NetWork"

4.1 Network

Network就是我们要说的重中之重，我刷用心一下页面，可以看到有很多的资源。

4.1.1 资源分类

All就表示展示全部资源；

Fetch/XHR则是可以发送HTTP请求的，这里可以筛选出所有的HTTP请求；

CSS则是页面中的CSS样式资源文件；

JS则是页面中相关的JavaScript资源文件；

Img则是页面中的图片资源文件；

4.1.2 Request Headers和Reponse Headers

然后我随便点击一个HTTP请求，可以在右侧看到Header，有Request headers请求头和Response Headers响应头，下方就显示了我们刚才提到的头部携带的部分信息数据；

General中可以看到当前HTTP的Request URL = http://......，Request Method 为GET查询，Status Code为查询状态200表示查询成功

4.1.3 Response Body

响应体。就是Header方法中请求的路径返回过来的数据信息。

通常在做前后端校验时，都会用来判断我们后端的接口查询到的数据是否正确，如果不正确则说明是我们后端查询接口查询错误；

如果数据正确页面不显示或显示错误，则说明是前端代码出现问题，只需要去对应的前端页面进行排查修改；

4.2 Source

Source则是前端页面的代码，包含静态资源，HTML文件，JS文件，图片等众多资源如下图所示。

但一般情况下，HTML源文件和JS代码文件都会被隐藏不能让用户看到，防止用户恶意窃取。而我们本地启动自己的项目代码的时候，是可以看到HTML文件和JS文件的，还可以在JS文件中打断点进行调试，如下图，我启动了本地的前端项目，可以看到这里就有JS文件和HTML文件，我们将鼠标点击在行头，就可以标记断点进行调试，如下图蓝色的三行几位断点，当JS代码运行到此处时，就会卡住，和我们使用IDEA进行DEBUG一样的道理。