前后端开发必备的计算机网络知识

做 Web 前后端，不必把《计算机网络》整本啃完，但要把「浏览器 / App 如何把请求送到服务、服务如何回响应」这条链路吃透。本文按日常开发会踩到的问题组织，偏实用。

一、先建立一张总图

一次典型的前端调后端：

text 复制代码

浏览器 / App
    ↓ DNS 解析域名 → IP
    ↓ TCP 三次握手（HTTPS 还有 TLS 握手）
    ↓ 发送 HTTP 请求（方法、路径、头、Body）
网关 / Nginx / 反向代理（可选）
    ↓
后端服务（Spring / Node / ...）
    ↓
数据库 / Redis / MQ（内网再连一次）
    ↓
HTTP 响应（状态码、头、Body）
    ↓
前端渲染 / 处理错误

前后端天天打交道的，主要是：DNS、TCP/TLS、HTTP、端口、代理、CORS、Cookie、缓存、超时与重试。

二、IP、端口、域名

1. IP 与端口

概念	含义	开发里常见
IP	主机在网络中的地址	`127.0.0.1` 本机，`10.0.2.2` 虚拟机看宿主机
端口	同一台机器上区分进程	前端 `5173`，后端 `8081`，MySQL `3306`，Redis `6379`
`localhost`	本机回环	只表示「自己」，容器里的 localhost ≠ 宿主机

URL 形态：

text 复制代码

https://api.example.com:443/api/books?page=1
└协议┘ └────主机名────┘ └端口┘└路径┘ └查询┘

省略端口时：HTTP 默认 80，HTTPS 默认 443。

2. DNS

浏览器输入域名后，先查 DNS 得到 IP，再连 IP。

开发相关点：

改了 DNS / hosts，要清浏览器或系统 DNS 缓存才生效
localhost 一般不走公网 DNS，直接解析到 127.0.0.1 / ::1
前后端分离时，前端域名与 API 域名不同，会引出 CORS（见后文）

3. 公网、内网、端口转发

场景	说明
本机前后端	前端 `localhost:5173` 调 `localhost:8081`
Docker / 虚拟机	容器端口要映射到宿主机；VirtualBox 常用 NAT 端口转发
局域网联调	用电脑局域网 IP（如 `192.168.x.x`），注意防火墙

三、TCP 与连接（够用即可）

HTTP（1.x）通常跑在 TCP 之上。

开发需要记住的

三次握手：建立连接有成本；短连接频繁握手会慢
连接复用：HTTP/1.1 Keep-Alive、HTTP/2 多路复用，减少重复建连
超时：连接超时、读超时、写超时要分开理解
连接被拒 Connection refused：对端没进程监听该端口（服务没起或端口错）
连接重置 / 中断：对端崩了、代理超时断开、防火墙掐断

前后端排查口诀：

text 复制代码

能 ping / 端口通不通？ → 网络与进程
TLS 报错？ → 证书 / HTTPS 配置
HTTP 4xx/5xx？ → 应用与权限逻辑

四、HTTP：前后端的共同语言

1. 请求方法

方法	常见语义	注意
GET	查询	参数多在 Query；不应有副作用
POST	创建 / 提交	Body 常见 JSON
PUT / PATCH	全量 / 部分更新	约定要前后端一致
DELETE	删除

REST 是约定，不是协议强制；重要的是 团队对方法与路径的约定一致。

2. 状态码（必须熟）

范围	含义	例子
2xx	成功	`200` OK，`201` Created，`204` No Content
3xx	重定向	`301`/`302`，前端要理解是否跟随
4xx	客户端问题	`400` 参数错，`401` 未登录，`403` 无权限，`404` 不存在，`409` 冲突
5xx	服务端问题	`500` 异常，`502`/`504` 网关/上游超时

联调时先看状态码，再看 Body 里的业务 code。

请求侧

Header	作用
`Content-Type`	Body 格式，如 `application/json`
`Authorization`	常放 `Bearer <JWT>`
`Cookie`	浏览器自动带上的会话信息
`Accept`	客户端期望的响应类型
`Origin`	浏览器跨域时自动带，后端 CORS 会用到

响应侧

Header	作用
`Content-Type`	响应体类型
`Set-Cookie`	让浏览器存 Cookie
`Cache-Control` / `ETag`	缓存
`Access-Control-*`	CORS 相关
`Location`	重定向目标

4. Body 与编码

JSON：Content-Type: application/json; charset=utf-8
表单：application/x-www-form-urlencoded 或 multipart/form-data（上传文件）
中文乱码：多半是编码未统一成 UTF-8

5. 幂等与安全（后端必懂，前端要配合）

概念	含义	实践
幂等	同一请求执行多次，效果一样	支付、下单用 `idempotencyKey`
安全方法	GET 不应改数据	不要用 GET 做删除
重试	网络抖动可能重发	写操作要防重复

五、HTTPS 与 TLS（够排查即可）

HTTPS = HTTP + TLS。

开发相关：

证书过期 / 域名不匹配 → 浏览器报不安全，客户端 SSL 错误
本地自签证书 → 浏览器要信任，或开发环境继续用 HTTP
混合内容：HTTPS 页面不能随意请求 HTTP 接口（会被浏览器拦）
Cookie 的 Secure：仅 HTTPS 发送

生产 API 应走 HTTPS；本地前后端可用 HTTP，但不要把「生产关 HTTPS」当常态。

六、跨域 CORS（前端高频、后端要配）

浏览器的同源策略：协议 + 域名 + 端口都相同才算同源。

text 复制代码

前端 https://www.example.com
API   https://api.example.com
→ 不同源 → 跨域

简单理解

浏览器发现跨域，可能先发 OPTIONS 预检（Preflight）
后端需在响应里带 Access-Control-Allow-Origin 等头
若要带 Cookie：Allow-Credentials: true，且 Origin 不能是 *

开发常见解法

方案	做法
前端代理	Vite/Webpack `proxy` 把 `/api` 转到后端，浏览器只访问同源
后端 CORS	Spring `CorsConfiguration` 放行前端 Origin
网关统一	Nginx 统一加 CORS 头

注意：CORS 是 浏览器 限制；Postman / 服务端调服务端没有 CORS 问题。

对比

方式	原理	注意
Cookie + Session	服务端存会话，浏览器存 SessionId	注意域名、Path、`HttpOnly`、`SameSite`
JWT / Token	客户端存 Token，请求头携带	XSS 风险；过期与刷新策略
LocalStorage 存 Token	方便但易被 XSS 读	敏感场景更倾向 `HttpOnly` Cookie

`SameSite`（跨站 Cookie）

值	行为
`Strict`	跨站几乎不带 Cookie
`Lax`	常见默认，部分跨站导航会带
`None`	跨站可带，必须配 `Secure`

前后端分离 + 不同域名时，登录态问题多半出在 Cookie 域与 SameSite，而不是「后端没写 Session」。

八、缓存：浏览器与 HTTP 缓存

机制	作用
强缓存	`Cache-Control: max-age=...`，未过期直接用本地
协商缓存	`ETag` / `Last-Modified`，问服务器变了没
前端内存 / 状态缓存	Vue/React 里缓存接口结果，与 HTTP 缓存不同层

接口「改了数据页面还是旧的」：先看是不是被浏览器或 CDN 缓存了 GET。

九、反向代理、网关、负载均衡

生产常见：

text 复制代码

用户 → Nginx / API Gateway → 多台后端实例

组件	作用
反向代理	隐藏后端、TLS 终结、静态资源、路径转发
负载均衡	把请求分到多实例
网关	鉴权、限流、路由、协议转换

开发相关配置例子：

nginx 复制代码

location /api/ {
    proxy_pass http://127.0.0.1:8081/api/;
    proxy_set_header Host $host;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
}

后端若要根据「真实客户端 IP」或「是否 HTTPS」做逻辑，要读 X-Forwarded-*（并只信任自己的代理）。

十、WebSocket 与长连接（了解）

场景	协议
普通 CRUD	HTTP 请求响应
聊天、推送、实时看板	WebSocket / SSE

WebSocket 也是先 HTTP 握手再升级；同样有跨域、鉴权、代理超时（Nginx 要调 proxy_read_timeout）问题。

十一、超时、重试、幂等（前后端都要约定）

超时分层

text 复制代码

浏览器 / axios timeout
    → Nginx proxy_read_timeout
        → 后端 MVC 超时
            → 调用 DB / Redis / 第三方的超时

任一层过短，都会表现为前端「请求失败」，但根因可能在更里层。

重试原则

GET / 查询：可谨慎重试
POST 支付、下单、抢券：必须幂等键或服务端去重，不能盲目重试

十二、前后端联调排查清单

按顺序查，少走弯路：

URL 对不对 ：协议、域名、端口、路径、是否多了 /api 前缀
服务在不在听 ：Connection refused → 进程 / 端口 / 防火墙
是否跨域：浏览器控制台 CORS 红字 → 代理或后端 CORS
状态码：401 登录，403 权限，404 路径，500 看后端日志
请求头 ：Content-Type、Authorization 是否带上
Body 格式：JSON 字段名、类型是否与后端 DTO 一致
环境不一致：本地通、测试不通 → DNS、网关、HTTPS、IP 白名单
抓包工具：浏览器 Network 面板、curl、Charles / Wireshark（深挖时）

前端 Network 面板必看四列：Status、Headers、Payload、Response。

十三、后端还要多懂一点「内网」

浏览器到 API 是公网/办公网；服务内部还有：

组件	默认端口（常见）	协议感
MySQL	3306	TCP
Redis	6379	TCP
RabbitMQ	5672 / 管理台 15672	AMQP / HTTP
Milvus	19530	gRPC

内网也要关心：超时、连接池、服务发现、防火墙、容器网络（host.docker.internal、Docker Compose 服务名）。

gRPC 与 HTTP 不同，但同样跑在 TCP 上；调不通时先确认端口映射与进程健康，再查应用层。

十四、学习优先级建议

前端优先

URL / 同源 / CORS
HTTP 方法、状态码、Header
Cookie / Token / Authorization
浏览器 Network 排查
HTTPS 混合内容、代理
缓存与上传下载

后端优先

TCP 连接与超时、端口监听
HTTP 语义、状态码设计、幂等
反向代理与 X-Forwarded-*
CORS 正确配置
TLS 证书与安全头
与 DB/Redis/MQ 的超时与连接管理

双方共同

接口契约（路径、方法、状态码、错误体）
环境与配置（dev / test / prod 基地址）
超时与重试策略写进文档

十五、一句话对照表

现象	优先怀疑
`ERR_CONNECTION_REFUSED`	端口错 / 服务未启动
CORS 报错	跨域未配 / 预检失败
`401`	Token / Cookie / 登录态
`403`	权限角色
`404`	路径或网关转发
`502`/`504`	网关后上游挂了或超时
本地 Postman 通、浏览器不通	多半 CORS 或 Cookie
有时成功有时失败	超时、负载、重试无幂等

小结

前后端需要的网络知识，核心不是背协议字段，而是能回答：

请求从浏览器走到哪一层？
断在 DNS、TCP、TLS 还是 HTTP？
跨域、登录态、缓存、代理分别在哪一层生效？
超时与重试会不会制造重复写？

把 HTTP + 跨域 + 认证携带方式 + 代理与超时 吃透，日常联调与排障就够用了；其余（拥塞控制、详细路由算法等）等做基础设施时再加深。

前后端开发必备的计算机网络知识