HTTP 协议

原创已于 2025-10-21 15:52:01 修改 · 1k 阅读

16 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#http #网络协议 #网络 #前端 #javascript

于 2024-03-09 20:00:00 首次发布

Node.js 专栏收录该内容

9 篇文章

订阅专栏

文章目录

一、HTTP 协议基础概念
- 1.1 定义与定位
- 1.2 核心作用
二、HTTP 请求报文结构
三、HTTP 响应报文结构
四、用 Node.js 实战 HTTP 服务
五、网页资源加载过程
六、GET 与 POST 请求的核心区别
七、HTTP 进阶特性
八、总结

在互联网的世界里，无论是浏览网页、刷短视频还是使用 APP，背后都离不开一个核心协议 ——HTTP。作为浏览器与服务器通信的 “共同语言”，HTTP（超文本传输协议）是 Web 技术的基石。理解 HTTP 不仅能帮助开发者排查网络问题、优化请求性能，更能为后续学习前端框架、后端开发或接口设计打下坚实基础。本文将从概念到实践，全面解析 HTTP 协议的核心知识，并补充进阶特性与实战技巧。

一、HTTP 协议基础概念

1.1 定义与定位

HTTP（HyperText Transfer Protocol，超文本传输协议）是一种基于TCP/IP的应用层通信协议，用于规范浏览器与万维网服务器之间的通信规则。

超文本：不仅限于文本，还包括图片、视频、音频、链接等资源；
传输协议：定义了数据在网络中传输的格式和规则；
应用层：在 OSI 七层模型中属于最上层，直接面向用户应用场景。

1.2 核心作用

HTTP 协议的核心是 “请求 - 响应” 模型：

客户端（如浏览器）发送请求报文；
服务器接收后处理请求，返回响应报文；
报文：本质是符合协议规范的字符串，包含通信所需的所有信息。

二、HTTP 请求报文结构

请求报文由 4 部分组成，按顺序依次为：

请求行 → 请求头 → 空行 → 请求体

2.1 请求行

请求行包含 3 部分信息，用空格分隔：

请求方法 请求URL HTTP版本

（1）请求方法

HTTP 定义了多种请求方法，用于表示对资源的操作意图，常见的有：

GET：获取资源（如浏览网页、查询数据）；
POST：提交资源（如表单提交、创建数据）；
PUT：更新资源（全量更新）；
DELETE：删除资源；
PATCH：部分更新资源（补充 PUT 的不足）。

注意：方法名区分大小写（规范中建议大写），且 GET、POST 是最常用的两种。

（2）请求 URL

URL（统一资源定位器）是资源的唯一地址，格式如下：

协议://域名:端口/路径?查询字符串#哈希

例如：http://www.baidu.com:80/index.html?a=100&b=200#logo

协议：如 http、https、ftp 等；
域名：服务器的网络标识（对应 IP 地址，通过 DNS 解析）；
端口：默认端口可省略（HTTP 默认 80，HTTPS 默认 443）；
路径：资源在服务器上的位置（如/index.html）；
查询字符串：键值对形式的参数（?key1=value1&key2=value2）；
哈希（锚点）：用于定位页面内位置（仅客户端解析，不发送给服务器）。

补充：URL 中的特殊字符（如空格、中文）需进行

URL 编码

（如空格 → %20 ，中文 → %E4%B8%AD）。

（3）HTTP 版本

常见版本：

HTTP/1.1：目前应用最广泛的版本，支持持久连接、管道化请求；
HTTP/2：多路复用、二进制传输，性能更优；
HTTP/3：基于 QUIC 协议，解决 TCP 队头阻塞问题。

2.2 请求头

请求头是键值对格式（头名: 头值），用于传递额外的请求信息，常见请求头如下：

请求头	说明
Host	服务器域名（必选，如`Host: www.baidu.com`）
Connection	连接方式（`keep-alive`保持连接，`close`关闭连接）
Cache-Control	缓存控制（如`max-age=3600`表示缓存 1 小时）
User-Agent	客户端标识（如浏览器型号、设备信息，用于服务器识别客户端）
Accept	客户端可接收的数据类型（如`text/html, application/json`）
Accept-Encoding	可接收的压缩方式（如`gzip, deflate`）
Accept-Language	可接收的语言（如`zh-CN,en;q=0.8`，`q`为优先级）
Referer	请求来源 URL（用于防盗链、统计来源）
Cookie	客户端存储的 Cookie 信息（键值对形式）

2.3 空行

请求头与请求体之间必须有一个空行（\r\n），用于分隔两者，是协议规定的格式标志。

2.4 请求体

请求体是发送给服务器的具体数据，格式灵活，是否存在取决于请求方法：

GET 请求：通常无请求体（参数通过 URL 查询字符串传递）；
POST 请求：必有请求体，常见格式：
- 表单格式：username=admin&password=123（对应Content-Type: application/x-www-form-urlencoded）；
- JSON 格式：{"username":"admin","password":"123"}（对应Content-Type: application/json）；
- 文件上传：multipart/form-data（用于上传图片、文件等二进制数据）。

三、HTTP 响应报文结构

响应报文与请求报文对应，也由 4 部分组成：

响应行 → 响应头 → 空行 → 响应体

3.1 响应行

响应行包含 3 部分信息，用空格分隔：

HTTP版本 状态码 状态描述

例如：HTTP/1.1 200 OK

（1）状态码

状态码是 3 位数字，用于表示请求处理结果，分为 5 类：

类别	含义	常见状态码
1xx	信息提示	100（继续发送请求）
2xx	成功	200（成功）、201（创建成功）
3xx	重定向	301（永久重定向）、302（临时重定向）、304（资源未修改，使用缓存）
4xx	客户端错误	400（请求错误）、401（未授权）、403（禁止访问）、404（资源不存在）
5xx	服务器错误	500（服务器内部错误）、502（网关错误）、504（网关超时）

状态描述是对状态码的文字说明（如 200 对应 OK），但实际开发中主要依赖状态码判断结果。

3.2 响应头

响应头也是键值对格式，用于传递服务器的附加信息，常见响应头：

响应头	说明
Content-Type	响应体数据类型及编码（如`text/html;charset=utf-8`，`application/json`）
Content-Length	响应体长度（单位：字节）
Cache-Control	缓存规则（如`private`仅客户端缓存，`public`允许代理缓存）
Server	服务器软件信息（如`Server: Nginx`）
Set-Cookie	服务器向客户端设置 Cookie（如`username=admin; Path=/; Max-Age=3600`）
Location	重定向目标 URL（配合 3xx 状态码使用）
Access-Control-Allow-Origin	跨域资源共享（CORS）配置（如`*`表示允许所有域名访问）

3.3 空行

与请求报文一致，响应头与响应体之间需用空行分隔。

3.4 响应体

响应体是服务器返回的具体数据，格式由Content-Type指定，常见类型：

HTML：网页内容（text/html）；
CSS/JS：样式或脚本（text/css、application/javascript）；
图片 / 视频：二进制数据（image/jpeg、video/mp4）；
JSON：接口数据（application/json）。

四、用 Node.js 实战 HTTP 服务

掌握理论后，我们通过 Node.js 的http模块手动创建 HTTP 服务，加深对请求与响应的理解。

4.1 基础服务搭建

// 1. 导入http模块
const http = require('http')

// 2. 创建服务对象
// request：请求报文封装对象
// response：响应报文封装对象
const server = http.createServer((request, response) => {
  // 设置响应头（解决中文乱码）
  response.setHeader('Content-Type', 'text/html;charset=utf-8')
  // 设置响应体并结束响应
  response.end('Hello HTTP Server！这是我的第一个HTTP服务')
})

// 3. 监听端口（端口范围：1-65535，常用8080、9000等）
server.listen(9000, () => {
  console.log('服务已启动，访问：http://127.0.0.1:9000')
});

注意：

服务启动后，修改代码需重启服务（可使用nodemon工具自动重启：npm i nodemon -g，之后用nodemon 文件名启动）；
端口被占用时，需关闭占用进程（Windows 用netstat -ano | findstr 端口号查找进程 ID，再通过任务管理器关闭）或更换端口。

4.2 获取请求报文数据

通过request对象获取请求信息：

const http = require('http')
const url = require('url') // 用于解析URL

const server = http.createServer((req, res) => {
  // 1. 请求方法
  console.log('请求方法：', req.method)

  // 2. 请求URL（仅路径+查询字符串）
  console.log('请求URL：', req.url)

  // 3. 解析URL（获取路径和查询参数）
  const parsedUrl = url.parse(req.url, true) // true：将查询字符串转为对象
  console.log('路径：', parsedUrl.pathname) // 如\`/login\`
  console.log('查询参数：', parsedUrl.query) // 如\`{ username: 'admin' }\`

  // 4. 请求头（所有键名已转为小写）
  console.log('请求头：', req.headers)

  // 5. 获取请求体（POST请求）
  let body = ''
  req.on('data', (chunk) => { // 接收数据片段（适用于大数据，分块传输）
    body += chunk
  })

  req.on('end', () => { // 数据接收完成
    console.log('请求体：', body)
    res.end('请求信息已打印到控制台') // 必须在end事件内响应，避免提前结束
  })
})

server.listen(9000);

4.3 实现静态资源服务

静态资源（HTML、CSS、JS、图片等）服务是 Web 服务器的基础功能，核心是根据请求 URL 返回对应文件：

const http = require('http')
const fs = require('fs')
const path = require('path')
const mime = require('mime-types') // 需安装：npm i mime-types（自动识别MIME类型）

const server = http.createServer((req, res) => {
  // 解决跨域问题（实战踩坑1：前端请求后端接口时常见跨域报错）
  res.setHeader('Access-Control-Allow-Origin', '*') // 允许所有域名访问（生产环境需指定具体域名）

  // 1. 确定静态资源根目录（如public文件夹）
  const rootDir = path.join(__dirname, 'public')

  // 2. 拼接请求文件的绝对路径（处理中文文件名乱码，实战踩坑2）
  let decodedUrl = decodeURIComponent(req.url) // 解码URL中的中文
  let filePath = path.join(rootDir, decodedUrl)

  // 若请求目录（如http://127.0.0.1:9000/），默认返回index.html
  if (req.url.endsWith('/')) {
    filePath = path.join(filePath, 'index.html')
  }

  // 3. 读取文件并返回（处理大文件，实战踩坑3：避免内存溢出）
  fs.stat(filePath, (err, stats) => { // 先判断文件是否存在
    if (err || !stats.isFile()) {
      // 处理错误（如文件不存在返回404）
      res.statusCode = 404
      res.setHeader('Content-Type', 'text/html;charset=utf-8')
      res.end('<h1>404 资源不存在</h1>')
    } else {
      // 自动识别文件MIME类型（避免浏览器将CSS/JS当作下载文件）
      const mimeType = mime.lookup(filePath) || 'application/octet-stream'
      res.setHeader('Content-Type', mimeType)
      // 用流式读取大文件（替代fs.readFile，适合视频、压缩包等）
      const stream = fs.createReadStream(filePath)
      stream.pipe(res) // 流式传输，边读边传
    }
  })
})

server.listen(9000);

五、网页资源加载过程

当在浏览器输入 URL 并回车后，资源加载流程如下（时序简化版）：

输入URL → DNS解析（域名→IP） → TCP三次握手（建立连接） → 发送HTTP请求 → 服务器处理并返回响应 → 浏览器渲染页面（递归请求依赖资源） → TCP四次挥手（关闭连接，若keep-alive则保持）

关键：HTML 是 “入口资源”，浏览器会根据 HTML 中的<link>、<script>、<img>等标签，自动发送其他资源的请求。例如：加载index.html后，会解析到<link rel="stylesheet" href="style.css">，再自动请求style.css。

六、GET 与 POST 请求的核心区别

维度	GET	POST
用途	获取资源（无副作用）	提交资源（有副作用，如创建 / 修改数据）
参数位置	URL 查询字符串	请求体
缓存	可被缓存（浏览器会存储）	默认不缓存
长度限制	有（依赖浏览器，通常 2KB）	无（取决于服务器配置）
安全性	低（参数暴露在 URL）	较高（参数在请求体，非明文传输需配合 HTTPS）
书签 / 历史记录	可被收藏 / 记录	不可

注意：安全性的区别仅针对参数可见性，真正的安全需依赖 HTTPS 加密传输。

七、HTTP 进阶特性

7.1 缓存机制：提升性能的核心手段

HTTP 缓存通过减少重复请求，大幅提升页面加载速度，分为强缓存和协商缓存。

（1）强缓存（本地缓存，不发请求）

由Expires（HTTP/1.0，绝对时间，如Expires: Wed, 21 Oct 2025 07:28:00 GMT）或Cache-Control（HTTP/1.1，相对时间，优先级更高）控制；
示例：Cache-Control: max-age=3600表示资源缓存 1 小时，1 小时内重复请求直接用本地缓存；
适用场景：静态资源（如图片、JS、CSS），内容长时间不变。

（2）协商缓存（需发请求，服务器判断是否用缓存）

由Last-Modified/If-Modified-Since（基于修改时间）或ETag/If-None-Match（基于资源哈希值）控制；
流程：客户端请求时带If-Modified-Since（上次响应的Last-Modified），服务器对比资源修改时间，若未变返回 304（用缓存），否则返回新资源（200）；
适用场景：频繁更新的资源（如新闻页面）。

实战技巧：静态资源（如 app.js）可加版本号（app.v2.js），强制浏览器更新缓存。

7.2 HTTPS：更安全的 HTTP

HTTPS（HTTP Secure）是 HTTP 的加密版本，核心差异是增加了 TLS 层（传输层安全协议）：

加密流程：客户端与服务器通过 “握手” 协商加密算法，生成会话密钥，后续数据用密钥加密传输；
证书作用：由 CA 机构颁发的 SSL 证书，用于验证服务器身份（防止中间人攻击）；
为什么需要 HTTPS：
- 防止数据被窃听、篡改（如密码、支付信息）；
- 现代浏览器对 HTTP 网站标记 “不安全”，影响用户信任；
- 提升 SEO 排名（搜索引擎优先收录 HTTPS 网站）。

7.3 HTTP/2 与 HTTP/3：性能的飞跃

（1）HTTP/2（2015 年发布）

核心改进：
- 多路复用：一个 TCP 连接可并行传输多个请求（解决 HTTP/1.1 的 “队头阻塞” 问题）；
- 二进制帧：数据传输用二进制（HTTP/1.1 用文本，解析效率低）；
- 服务器推送：主动推送依赖资源（如请求index.html时，提前推送style.css）。

（2）HTTP/3（2022 年发布）

核心改进：
- 基于 QUIC 协议（而非 TCP）：解决 TCP 队头阻塞，连接建立更快（1RTT vs TCP 的 3RTT）；
- 更好的移动网络适配：支持连接迁移（如手机从 WiFi 切换到 4G，无需重新握手）。

现状：主流浏览器和服务器（Nginx、Cloudflare）已支持 HTTP/2，HTTP/3 正逐步普及。

八、总结

HTTP 协议是 Web 通信的基石，其核心是 “请求 - 响应” 模型，通过规范报文格式实现客户端与服务器的交互。本文从基础概念出发，详细解析了请求 / 响应报文的结构、常用字段及状态码，通过 Node.js 实战演示了 HTTP 服务的创建与静态资源处理，并补充了缓存机制、HTTPS、HTTP 版本演进等进阶知识。

掌握 HTTP 不仅能帮助开发者理解 Web 运行原理，更能在实际开发中优化请求性能、排查接口问题。