web后端----HTTP协议与浏览器F12

这里写目录标题

http协议

请求(Request)

内容及举例

请求:表示用户在浏览器做了操作之后,浏览器发送给服务器的请求。

当用户做了某些操作后,浏览器会自动将该操作打包成http协议格式的数据

该协议的数据包含:

1、请求行 ,即上图中第一行,第一个位置表示请求类型(GET 还是 POST ...更多见下面《HTTP请求方法》),之后第二个位置是请求的资源路径(URL),第三个位置是使用的http版本

2、请求头 :如上图第2~8行

第2~8行:是一些服务器要使用的附加信息

(可以看到第7行的Connection的值是keep-alive,表示,http协议的传输层采用的是TCP协议,这里是在进行三次握手建立连接)

3、空行 :如上图第9行

第9行:是一个空行,这是必须的,他用于表示请求头部分的内容结束
而请求行+请求头+空行(即刨去数据主体),可以被称为"协议头"

3、请求体 (也称请求数据):如果一个请求需要从浏览器携带数据给服务器,那么数据内容会放在第9行之后,也就是"请求体"部分,如下图:

请求体里的数据一般使用JSON格式 或者表单信息格式

重要:
只有post或者put请求才有请求体,一般get请求不会有请求体(其参数都在URL中)

响应(Response)

包括:

1、状态行 :即上图第一行,包括http协议版本号,然后是状态码,状态码后面是对状态码的描述,即对状态码的解释。比如上图的200,表示的就是OK的意思,而我们常见的404,表示的就是找不到资源的意思(更多见下面《HTTP常用状态码》)

2、响应头 :上图中第2~8行,说明要传达给浏览器的一些附加信息(第4行和第9行必须有,其他的可以没有)

其中:第4行(必须有),表示这次要发送的数据是什么格式类型的,如(文本类型、img、png类型、mp3类型、mp4类型等等),以及该文件的编码格式(更多见下面《常见网络文件类型》)

第5行,要么不写,要么传-1,要么就算的精确

第8行,表示TCP连接断开,说明,http协议是每进行一次连接,互通一次数据,且立马断开。待下次建立连接,再互通一次数据,再断开

3、空行 :在消息报头之后,是一个空行,表示消息报头的结束
状态行+消息报头+空行(即刨去响应正文部分),称为协议头

4、响应体 (也称响应正文):即返回给浏览器的数据

如,JSON格式的数据、html页面、图片等

HTTP请求方法

常用的有:GET、POST、DELETE

HTTP常用状态码

常见网络文件类型


HTTP 和 HTTPS 的区别

HTTP:明文传输,不加密,容易被监听或篡改。

HTTPS:在 HTTP 上增加了 TLS/SSL 加密层,安全性更高。

可以理解为 HTTP 是普通电话聊天,HTTPS 是加密电话聊天。

补充

http协议自学网站:

https://www.runoob.com/

https://www.runoob.com/http/http-tutorial.html

开发视角下的http

前端

刚开始进入web页面时,如上图

在web页面上操作时,会调用前端开发的函数,如上图

总之,不用前端不用自己去封装http报文,浏览器会自动封装,前端只需要按照一定的API填入关键数据即可

如,传入请求方法(get/post)、请求路径(URL)、传入请求体(JSON数据)

后端

一般web后端都会使用一些后端框架

其中的:

2、表示,后端框架接收http报文,并且会自动帮你将http报文解析出来
我们不需要自己解析http报文,直接可以拿到其中的关键数据:

如,请求方法(get/post)、资源路径(URL)、请求体(JSON数据)

然后做下一步处理即可,如,先前会根据get/post+URL注册路由,即注册业务处理函数到这个请求路径上,此时根据收到的get/post+URL进行路由分发,分发到之前注册的函数进行处理,同时传入请求体的数据,等等

7、后端框架会将你想要返回的响应,自动封装成http报文:

我们不需要自己封装http报文,只需要填入一些返回的关键数据:

如,响应状态码、返回的JSON数据等,如下图:

浏览器(Google)的F12信息

请求(Request)

请求行

见下方"general"

请求头

点击"网络"--->"Header"

往下翻,会有一个"Request Headers",这个就是请求头

请求体

一般post请求会有这个选项:"payload",其中的"Request Payload"就是请求体

响应(Response)

响应行

见下方"general"

响应头

同样在"header"--->"Response headers",就是响应头

响应体


上图中的Response和Preview都是响应体的内容,只不过Response是最原始的响应体内容 ,Preview是对响应体的内容进行了一定的预览效果,看起来会很舒服

general(请求行、响应行)

其包含

1、请求方面:请求行中的内容:请求方法、请求路径URL

2、响应方面:响应行中的内容:状态码

一级目录

二级目录

二级目录

二级目录

一级目录

二级目录

二级目录

二级目录

相关推荐
发光小北19 小时前
Modbus TCP 转 Profinet 主站网关如何应用?
网络·网络协议·tcp/ip
QQ1__8115175151 天前
Spring boot名城小区物业管理系统信息管理系统源码-SpringBoot后端+Vue前端+MySQL【可直接运行】
前端·vue.js·spring boot
钛态1 天前
前端微前端架构:大项目的救命稻草还是自找麻烦?
前端·vue·react·web
一粒黑子1 天前
【实战解析】阿里开源 PageAgent:纯前端 GUI Agent,一行JS让网页支持自然语言操控
前端·javascript·开源
独角鲸网络安全实验室1 天前
2026微信小程序抓包全解析:从实操落地到合规风控,解锁前端调试新范式
前端·微信小程序·小程序·抓包·系统代理绕过·https证书严格校验·进程隔离
紫微AI1 天前
前端文本测量成了卡死一切创新的最后瓶颈,pretext实现突破了
前端·人工智能·typescript
GISer_Jing1 天前
AI前端(From豆包)
前端·aigc·ai编程
IT枫斗者1 天前
前端部署后如何判断“页面是不是最新”?一套可落地的版本检测方案(适配 Vite/Vue/React/任意 SPA)
前端·javascript·vue.js·react.js·架构·bug
测试修炼手册1 天前
[测试技术] 深入理解 JSON Web Token (JWT)
前端·json
AI老李1 天前
2026 年 Web 前端开发的 8 个趋势!
前端