[特殊字符] HTTP 超详细详解 | 从入门到看懂浏览器请求

前言

HTTP 是 Web 开发的基石，不管是前端、后端、测试还是网安，都必须掌握。这篇文章带你从零开始，彻底搞懂 HTTP、HTTPS、URL、请求响应、状态码、Cookie 等核心知识点。

一、什么是 HTTP？

HTTP 的全称是 HyperText Transfer Protocol（超文本传输协议）。

简单理解：**HTTP 就是浏览器和服务器之间"交流"的规则。**我们访问网页、加载图片、视频、接口数据，全部依赖 HTTP 完成。

HTTP 由 Tim Berners-Lee 在 1989--1991 年设计，是互联网最基础的协议之一。

二、什么是 HTTPS?

HTTPS = HTTP + Secure ，也就是 加密版的 HTTP。

它的作用：

数据加密：别人无法窃听你和服务器之间的传输内容
身份验证：确保你访问的是真实服务器，不是钓鱼网站
数据完整性：防止内容被篡改

一句话总结：HTTP 不安全，HTTPS 安全。

三、URL 结构详解

URL 就是我们常说的"网址"，它告诉浏览器去哪里、找什么资源。

一个完整的 URL 结构如下：

https://user:password@域名:端口/路径?查询参数#片段

各部分含义：

Scheme（协议）：http、https、ftp 等
User（用户信息）：用于身份验证，很少使用
Host（主机）：域名或 IP 地址
Port（端口）：HTTP 默认 80；HTTPS 默认 443
Path（路径）：要访问的页面或资源位置
Query String（查询参数）：向后端传递数据，如 ?id=1
Fragment（片段）：页面内锚点，用于快速跳转到页面某位置

四、HTTP 请求与响应

浏览器访问网页，本质就是：浏览器发送请求 → 服务器返回响应。

1. 请求示例（Request）

最简单的 HTTP 请求只需要一行：

GET / HTTP/1.1

真实请求示例：

GET / HTTP/1.1 Host: example.com User-Agent: Mozilla/5.0 Firefox/87.0 Referer: https://example.com/

含义：

GET：请求方法，表示获取资源
/：访问网站根目录
Host：要访问的域名
User-Agent：浏览器信息
Referer：从哪个页面跳转过来

2. 响应示例（Response）

HTTP/1.1 200 OK Server: nginx Date: Wed, 15 May 2024 10:00:00 GMT Content-Type: text/html Content-Length: 98 <html> <head><title>首页</title></head> <body>欢迎访问</body> </html>

含义：

200 OK：请求成功
Server：服务器软件
Content-Type：返回内容类型（HTML/JSON/图片等）
Content-Length：内容长度
空行之后就是真实的网页数据

五、HTTP 请求方法

HTTP 方法表示客户端想要执行的操作，最常用的有 4 个：

GET：获取数据（查）
POST：提交数据（增）
PUT：更新数据（改）
DELETE：删除数据（删）

六、HTTP 状态码（必背）

状态码表示请求的结果，分为 5 大类：

100--199：信息提示
200--299：成功
300--399：重定向
400--499：客户端错误
500--599：服务端错误

最常见状态码：

200 OK：成功
301：永久重定向
302：临时重定向
400：请求错误
401：未登录
403：禁止访问
404：资源不存在
500：服务器内部错误
503：服务不可用

七、HTTP 头部 Headers

Headers 是请求/响应中携带的附加信息，用于沟通。

常用请求头

Host：访问的域名
User-Agent：浏览器信息
Content-Length：数据长度
Accept-Encoding：支持的压缩方式
Cookie：身份凭证

常用响应头

Set-Cookie：设置 Cookie
Cache-Control：缓存策略
Content-Type：返回数据类型
Content-Encoding：压缩方式

HTTP 是 无状态（stateless） 协议，服务器记不住你。于是用 Cookie 来保存你的状态。

工作流程：

服务器返回 Set-Cookie
浏览器保存 Cookie
之后每次请求自动带上 Cookie
服务器就知道"你是谁"

Cookie 主要用于：

登录状态保持
用户个性化设置
用户行为记录

可通过FN+F12打开Developer Tool的Network页面查看Cookie