F12 网络调试实战：前后端交互原理与 Flask 路由定位
架构基础：客户端、服务端与前后端分层
理解通信角色是排查问题的第一步。所有客户端发起请求时，目标链接必然包含 IP 和端口。
请求发给谁了？
如果 URL 里直接有 IP，直接使用；如果没有，浏览器会调用 DNS 查询域名，解析出对应的 IP。
服务端（Server）
这里指程序实际运行的机器环境。在 Web 系统中，我们常称为'后端'；在非 Web 系统或传统架构中，则更多被称为'服务端'。
前端（Front-end）
前端不等于浏览器本身，浏览器只是前端代码最常见的运行环境之一。Web 系统通常采用前后端分离的架构，而非 Web 系统则更强调客户端与服务端的交互。
F12 Network 面板实战
打开开发者工具，进入 Network 面板，这是观察前后端交互最直接的窗口。
筛选关键请求
如果请求记录过多，建议先点击清空按钮，再进行实际操作。重点查看 XHR / Fetch 面板，这里过滤出的就是浏览器向后端发送的 HTTP 接口请求。
为什么关注 XHR / Fetch？
XHR（XMLHttpRequest）和 Fetch 代表了前端与后端接口'交互'的主要方式。其他类型的资源加载（如图片、CSS）通常不携带业务逻辑数据。
请求详情分析
点开其中一个请求，我们可以从以下几个维度深入分析：
- Payload：载荷，即请求体中的数据。
- Preview：预览，方便快速查看返回数据的结构。
