前后端开发必备的计算机网络知识-171主机测评

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

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

一、先建立一张总图

一次典型的前端调后端：

浏览器 / 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 形态：

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：对端没进程监听该端口（服务没起或端口错）

连接重置 / 中断：对端崩了、代理超时断开、防火墙掐断

前后端排查口诀：

能 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。

3. Header（头）里常见字段

请求侧

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（前端高频、后端要配）

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

前端 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、Token

对比

方式原理注意

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。

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

生产常见：

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

组件作用

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

开发相关配置例子：

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）问题。

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

超时分层

浏览器 / 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 + 跨域 + 认证携带方式 + 代理与超时吃透，日常联调与排障就够用了；其余（拥塞控制、详细路由算法等）等做基础设施时再加深。