FreeBuf.COM网络安全行业门户，每日发布专业的安全资讯、技术剖析。

先跟大家复习一遍前后端分离结构和传统结构（前后端不分离）的特点：

1. 前后端不分离（传统架构）

• 架构特点：前端代码（HTML、CSS、JS）嵌入在后端框架中，后端主导页面渲染和数据处理。
• 职责耦合：
  • 后端不仅负责业务逻辑（如数据查询、权限校验），还需通过模板引擎（如 JSP、Thymeleaf、PHP 模板）生成 HTML 页面，直接向前端输出完整的 “带数据的页面”。
  • 前端开发者可能需要在后端模板中编写代码（如在 JSP 中写<%%>标签），依赖后端环境运行。

2. 前后端分离

• 架构特点：前端和后端是两个独立的应用，通过标准化接口（API）通信，职责完全解耦。
• 职责清晰：
  • 前端：专注于 “用户界面渲染” 和 “交互逻辑”，通过 JS 框架（Vue、React、Angular）构建单页应用（SPA）或多页应用，独立运行在浏览器 / 客户端。
  • 后端：专注于 “业务逻辑” 和 “数据处理”，仅提供 API 接口（返回 JSON/XML 数据），不参与页面渲染。

前后端分离的核心是 “解耦”—— 通过 API 接口实现前后端的独立开发、部署和扩展，适合需求复杂、团队分工明确的项目；而不分离架构更简单直接，适合小型项目或快速开发场景。随着 Web 应用复杂度提升，前后端分离已成为主流架构，尤其在移动互联网、大数据场景中优势显著。

在前后端分离的网站中，我们可以发现很多数据都通过api接口进行传输的。而且由于结构的特性，一般都能在前端 js 代码中找到这些api接口。我相信大家很多会时候会用findsomething获取到的api接口使用post跟get的方式跑一遍，然后找到一些未授权的接口访问。但是就在我最近测试一个网站的时候，我发现了一个问题，只使用熊猫头获取到的接口，可能不够完整，还是得手动的收集比较好一些。接下来我就给大家分享一下我在面对前后端分离的网站中，前端 js 收集api接口的方法。

实例,找一个前后端分离的网站，然后打开我的熊猫头：

免责声明

1.一般免责声明：本文所提供的技术信息仅供参考，不构成任何专业建议。读者应根据自身情况谨慎使用且应遵守《中华人民共和国网络安全法》，作者及发布平台不对因使用本文信息而导致的任何直接或间接责任或损失负责。

2. 适用性声明：文中技术内容可能不适用于所有情况或系统，在实际应用前请充分测试和评估。若因使用不当造成的任何问题，相关方不承担责任。

3. 更新声明：技术发展迅速，文章内容可能存在滞后性。读者需自行判断信息的时效性，因依据过时内容产生的后果，作者及发布平台不承担责任。

本文为 独立观点，未经授权禁止转载。
如需授权、对文章有疑问或需删除稿件，请联系 FreeBuf 客服小蜜蜂（微信：freebee1024）