目录一. HTTP解析二. 请求报文2.1 请求行2.1.1 请求类型2.1.2 请求URL路径2.1.3 发送的HTTP请求的版本2.2 请求头2.2.1 Host主要用来实现虚拟主机技术2.2.2 Cookie一种让浏览器帮忙携带信息的手段2.2.3 Content—type资源的媒体类型2.2.4 User-Agent发送请求的浏览器类型和版本2.3 请求空行2.4 请求体三. 响应报文3.1 响应行3.2 响应头3.3 响应空行3.4 响应体四. 网络控制台4.1 Network4.1.1 资源分类4.1.2 Request Headers和Reponse Headers4.1.3 Response Body4.2 Source4.3 console一. HTTP解析HTTP 全称(hypertext transport protocol)译为 超文本传输协议协议详细规定了浏览器和万维网服务器之间互相通信的规则也可以理解为约定。很好理解我们把浏览器和万维网分别当成张三和李四他们两个在进行交流的时候一定要说同一种语言比如都说中文或者都说英文这样才能很好的进行沟通交流不能一个人说中文另一个人说英文语言不通会导致沟通交互阻塞双方不知道对方在说什么。因此在互联网中我们自然要制定一种通信规则也可以称之为协议所有人都遵循这一协议去进行沟通交互这样一来极大地提高了大家的沟通效率。二. 请求报文举个例子。A与B使用互联网进行交流A向B发送的内容就是请求报文B返回给A的内容就是响应报文。A与B交互这一动作就可以理解为用户和服务器用户向服务器发送请求服务器响应用户的请求返回内容。请求报文主要包含行、头、空行、体 四部分下面我对它们分别进行解析2.1 请求行类型、URL路径、HTTP版本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 请求头Host、Cookie、Content—Type、User-Agent2.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; charsetutf-8 表示这是一个 HTML 文档并且使用 UTF-8 编码application/pdf; nameexample.pdf; size1024 表示这是一个 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 1064 位AppleWebKit/537.36(KHTML, like Gecko)-------表示浏览器渲染引擎是 WebKit版本是 537.36Chrome/58.0.3029.110------表示浏览器是 Chrome版本是 58.0.3029.110Safari/537.3------表示浏览器是 Safari版本是 537.32.3 请求空行这里是空行属于一种固定格式必须有2.4 请求体就是我们常说的请求体。需要注意的是GET请求的请求体是空的。POST、PUT、DELETE 类型的请求通常请求体不为空发送POST请求时常常会把实体参数写在请求体中传递给后端三. 响应报文响应报文与请求报文非常类似也是包含行、头、空行、体四部分它与请求报文有些类似但也略有不同我们一起来看看吧。3.1 响应行响应行中主要包含三部分包含HTTP版本、HTTP响应状态码、响应状态字符串版本在上面已经说过了。响应状态码大家或许都见过就是200404405500这些就是状态码想详细了解的小伙伴们可以去看我的另一篇开发常见的http状态码.——400401403404500501503状态码大全_400响应码-CSDN博客 响应状态字符串与响应状态码可以说是配套的同学们可以简单的理解为状态码是对当前相应的描述比如响应状态码200响应状态字符串就是OK响应状态码404响应状态字符串就是没有找到对应资源3.2 响应头响应头中则是存储了一些对响应体的描述常见的有Content-Typetext/htmlcharsetutf-8表示响应文本的类型Content-length2048表示响应文本的长度Content-encodinggizp表示响应文本的压缩方式3.3 响应空行空行与请求空行一样是固定格式3.4 响应体响应体则是主要的返回结果通常是返回下面这种HTML文本然后浏览器将响应体中文本获取到再进行解析渲染到浏览器页面得以让用户浏览html head ...... /head body h1...h1 form.../form ...... /body /html四. 网络控制台我们作为开发人员调试前后端接口时通常需要到浏览器控制台页面去进行查看通过HTTP请求的请求头请求体响应头响应体就可以知道我们的接口是在哪一步出现了问题以便进行修改随便找一个网站点击键盘F12即可打开控制台如下图所示可以看到上面有一排选项对于开发人员来说最熟悉的就是console、Source、NetWork4.1 NetworkNetwork 就是我们要说的重中之重我刷新页面可以看到有很多的资源。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 SourceSource则是前端页面的代码包含静态资源HTML文件JS文件图片等众多资源如下图所示。但一般情况下HTML源文件和JS代码文件都会被隐藏不能让用户看到防止用户恶意窃取。而我们本地启动自己的项目代码的时候是可以看到HTML文件和JS文件的还可以在JS文件中打断点进行调试如下图我启动了本地的前端项目可以看到这里就有JS文件和HTML文件我们将鼠标点击在行头就可以标记断点进行调试如下图蓝色的三行几位断点当JS代码运行到此处时就会卡住和我们使用IDEA进行DEBUG一样的道理。4.3 consoleconsole就是前端的控制台我们验证JavaScript的打印console.log(内容)就是将内容打印输出在控制台
目录一. HTTP解析二. 请求报文2.1 请求行2.1.1 请求类型2.1.2 请求URL路径2.1.3 发送的HTTP请求的版本2.2 请求头2.2.1 Host主要用来实现虚拟主机技术2.2.2 Cookie一种让浏览器帮忙携带信息的手段2.2.3 Content—type资源的媒体类型2.2.4 User-Agent发送请求的浏览器类型和版本2.3 请求空行2.4 请求体三. 响应报文3.1 响应行3.2 响应头3.3 响应空行3.4 响应体四. 网络控制台4.1 Network4.1.1 资源分类4.1.2 Request Headers和Reponse Headers4.1.3 Response Body4.2 Source4.3 console一. HTTP解析HTTP 全称(hypertext transport protocol)译为 超文本传输协议协议详细规定了浏览器和万维网服务器之间互相通信的规则也可以理解为约定。很好理解我们把浏览器和万维网分别当成张三和李四他们两个在进行交流的时候一定要说同一种语言比如都说中文或者都说英文这样才能很好的进行沟通交流不能一个人说中文另一个人说英文语言不通会导致沟通交互阻塞双方不知道对方在说什么。因此在互联网中我们自然要制定一种通信规则也可以称之为协议所有人都遵循这一协议去进行沟通交互这样一来极大地提高了大家的沟通效率。二. 请求报文举个例子。A与B使用互联网进行交流A向B发送的内容就是请求报文B返回给A的内容就是响应报文。A与B交互这一动作就可以理解为用户和服务器用户向服务器发送请求服务器响应用户的请求返回内容。请求报文主要包含行、头、空行、体 四部分下面我对它们分别进行解析2.1 请求行类型、URL路径、HTTP版本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 请求头Host、Cookie、Content—Type、User-Agent2.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; charsetutf-8 表示这是一个 HTML 文档并且使用 UTF-8 编码application/pdf; nameexample.pdf; size1024 表示这是一个 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 1064 位AppleWebKit/537.36(KHTML, like Gecko)-------表示浏览器渲染引擎是 WebKit版本是 537.36Chrome/58.0.3029.110------表示浏览器是 Chrome版本是 58.0.3029.110Safari/537.3------表示浏览器是 Safari版本是 537.32.3 请求空行这里是空行属于一种固定格式必须有2.4 请求体就是我们常说的请求体。需要注意的是GET请求的请求体是空的。POST、PUT、DELETE 类型的请求通常请求体不为空发送POST请求时常常会把实体参数写在请求体中传递给后端三. 响应报文响应报文与请求报文非常类似也是包含行、头、空行、体四部分它与请求报文有些类似但也略有不同我们一起来看看吧。3.1 响应行响应行中主要包含三部分包含HTTP版本、HTTP响应状态码、响应状态字符串版本在上面已经说过了。响应状态码大家或许都见过就是200404405500这些就是状态码想详细了解的小伙伴们可以去看我的另一篇开发常见的http状态码.——400401403404500501503状态码大全_400响应码-CSDN博客 响应状态字符串与响应状态码可以说是配套的同学们可以简单的理解为状态码是对当前相应的描述比如响应状态码200响应状态字符串就是OK响应状态码404响应状态字符串就是没有找到对应资源3.2 响应头响应头中则是存储了一些对响应体的描述常见的有Content-Typetext/htmlcharsetutf-8表示响应文本的类型Content-length2048表示响应文本的长度Content-encodinggizp表示响应文本的压缩方式3.3 响应空行空行与请求空行一样是固定格式3.4 响应体响应体则是主要的返回结果通常是返回下面这种HTML文本然后浏览器将响应体中文本获取到再进行解析渲染到浏览器页面得以让用户浏览html head ...... /head body h1...h1 form.../form ...... /body /html四. 网络控制台我们作为开发人员调试前后端接口时通常需要到浏览器控制台页面去进行查看通过HTTP请求的请求头请求体响应头响应体就可以知道我们的接口是在哪一步出现了问题以便进行修改随便找一个网站点击键盘F12即可打开控制台如下图所示可以看到上面有一排选项对于开发人员来说最熟悉的就是console、Source、NetWork4.1 NetworkNetwork 就是我们要说的重中之重我刷新页面可以看到有很多的资源。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 SourceSource则是前端页面的代码包含静态资源HTML文件JS文件图片等众多资源如下图所示。但一般情况下HTML源文件和JS代码文件都会被隐藏不能让用户看到防止用户恶意窃取。而我们本地启动自己的项目代码的时候是可以看到HTML文件和JS文件的还可以在JS文件中打断点进行调试如下图我启动了本地的前端项目可以看到这里就有JS文件和HTML文件我们将鼠标点击在行头就可以标记断点进行调试如下图蓝色的三行几位断点当JS代码运行到此处时就会卡住和我们使用IDEA进行DEBUG一样的道理。4.3 consoleconsole就是前端的控制台我们验证JavaScript的打印console.log(内容)就是将内容打印输出在控制台
![游戏玩家的设备隐身术：用HidHide告别Windows设备冲突烦恼 [特殊字符]✨](http://pic.xiahunao.cn/yaotu/游戏玩家的设备隐身术：用HidHide告别Windows设备冲突烦恼 [特殊字符]✨)
