前后端开发必备的计算机网络知识做 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后端8081MySQL3306Redis6379localhost本机回环只表示「自己」容器里的 localhost ≠ 宿主机URL 形态https://api.example.com:443/api/books?page1 └协议┘ └────主机名────┘ └端口┘└路径┘ └查询┘省略端口时HTTP 默认80HTTPS 默认443。2. DNS浏览器输入域名后先查 DNS 得到 IP再连 IP。开发相关点改了 DNS / hosts要清浏览器或系统 DNS 缓存才生效localhost一般不走公网 DNS直接解析到127.0.0.1/::1前后端分离时前端域名与 API 域名不同会引出 CORS见后文3. 公网、内网、端口转发场景说明本机前后端前端localhost:5173调localhost:8081Docker / 虚拟机容器端口要映射到宿主机VirtualBox 常用 NAT 端口转发局域网联调用电脑局域网 IP如192.168.x.x注意防火墙三、TCP 与连接够用即可HTTP1.x通常跑在 TCP 之上。开发需要记住的三次握手建立连接有成本短连接频繁握手会慢连接复用HTTP/1.1 Keep-Alive、HTTP/2 多路复用减少重复建连超时连接超时、读超时、写超时要分开理解连接被拒Connection refused对端没进程监听该端口服务没起或端口错连接重置 / 中断对端崩了、代理超时断开、防火墙掐断前后端排查口诀能 ping / 端口通不通 → 网络与进程 TLS 报错 → 证书 / HTTPS 配置 HTTP 4xx/5xx → 应用与权限逻辑四、HTTP前后端的共同语言1. 请求方法方法常见语义注意GET查询参数多在 Query不应有副作用POST创建 / 提交Body 常见 JSONPUT / PATCH全量 / 部分更新约定要前后端一致DELETE删除REST 是约定不是协议强制重要的是团队对方法与路径的约定一致。2. 状态码必须熟范围含义例子2xx成功200OK201Created204No Content3xx重定向301/302前端要理解是否跟随4xx客户端问题400参数错401未登录403无权限404不存在409冲突5xx服务端问题500异常502/504网关/上游超时联调时先看状态码再看 Body 里的业务code。3. Header头里常见字段请求侧Header作用Content-TypeBody 格式如application/jsonAuthorization常放Bearer JWTCookie浏览器自动带上的会话信息Accept客户端期望的响应类型Origin浏览器跨域时自动带后端 CORS 会用到响应侧Header作用Content-Type响应体类型Set-Cookie让浏览器存 CookieCache-Control/ETag缓存Access-Control-*CORS 相关Location重定向目标4. Body 与编码JSONContent-Type: application/json; charsetutf-8表单application/x-www-form-urlencoded或multipart/form-data上传文件中文乱码多半是编码未统一成 UTF-85. 幂等与安全后端必懂前端要配合概念含义实践幂等同一请求执行多次效果一样支付、下单用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等头若要带 CookieAllow-Credentials: true且 Origin 不能是*开发常见解法方案做法前端代理Vite/Webpackproxy把/api转到后端浏览器只访问同源后端 CORSSpringCorsConfiguration放行前端 Origin网关统一Nginx 统一加 CORS 头注意CORS 是浏览器限制Postman / 服务端调服务端没有 CORS 问题。七、Cookie、Session、Token对比方式原理注意Cookie Session服务端存会话浏览器存 SessionId注意域名、Path、HttpOnly、SameSiteJWT / Token客户端存 Token请求头携带XSS 风险过期与刷新策略LocalStorage 存 Token方便但易被 XSS 读敏感场景更倾向HttpOnlyCookieSameSite跨站 Cookie值行为Strict跨站几乎不带 CookieLax常见默认部分跨站导航会带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 与长连接了解场景协议普通 CRUDHTTP 请求响应聊天、推送、实时看板WebSocket / SSEWebSocket 也是先 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 是公网/办公网服务内部还有组件默认端口常见协议感MySQL3306TCPRedis6379TCPRabbitMQ5672 / 管理台 15672AMQP / HTTPMilvus19530gRPC内网也要关心超时、连接池、服务发现、防火墙、容器网络host.docker.internal、Docker Compose 服务名。gRPC 与 HTTP 不同但同样跑在 TCP 上调不通时先确认端口映射与进程健康再查应用层。十四、学习优先级建议前端优先URL / 同源 / CORSHTTP 方法、状态码、HeaderCookie / Token /Authorization浏览器 Network 排查HTTPS 混合内容、代理缓存与上传下载后端优先TCP 连接与超时、端口监听HTTP 语义、状态码设计、幂等反向代理与X-Forwarded-*CORS 正确配置TLS 证书与安全头与 DB/Redis/MQ 的超时与连接管理双方共同接口契约路径、方法、状态码、错误体环境与配置dev / test / prod 基地址超时与重试策略写进文档十五、一句话对照表现象优先怀疑ERR_CONNECTION_REFUSED端口错 / 服务未启动CORS 报错跨域未配 / 预检失败401Token / Cookie / 登录态403权限角色404路径或网关转发502/504网关后上游挂了或超时本地 Postman 通、浏览器不通多半 CORS 或 Cookie有时成功有时失败超时、负载、重试无幂等小结前后端需要的网络知识核心不是背协议字段而是能回答请求从浏览器走到哪一层断在 DNS、TCP、TLS 还是 HTTP跨域、登录态、缓存、代理分别在哪一层生效超时与重试会不会制造重复写把HTTP 跨域 认证携带方式 代理与超时吃透日常联调与排障就够用了其余拥塞控制、详细路由算法等等做基础设施时再加深。