如何查找前端调用的API端点及对应的调用网页位置？

你的需求本质是做API调用链路的反向溯源，同时梳理响应字段的实际使用率，给后端响应瘦身做依据，具体可以用两类方案实现，完全覆盖「已知端点反查对应调用页面」的要求：

静态代码扫描方案（无需运行项目，基于源码快速初筛） #

• 基础全局搜索：中小项目直接用编辑器自带的全局正则搜索就行，搜索时排除node_modules、打包产物目录，针对端点路径拆分固定片段匹配即可。注意要适配项目常见的API封装逻辑：比如很多项目会把接口域名、通用前缀抽成全局常量，RESTful风格的动态路径（比如/order/detail/{orderId}）不要搜完整带参数的路径，搜固定的路径片段/order/detail/即可，顺着项目封装的统一请求方法（比如自定义的request、http工具方法）往下找所有传了对应路径的调用位置，再匹配这些调用代码所在的组件、对应的路由页面，就能整理出映射关系。
• AST静态分析脚本：如果项目体量比较大，可以基于JS/TS的语法解析工具写个简单的扫描脚本，遍历所有源码文件的语法树，自动定位所有fetch、axios、自定义请求方法的调用节点，自动提取传入的接口路径、所在文件路径，还可以顺着返回值的赋值链路，标记哪些响应字段被代码实际读取、哪些是从未被使用的冗余字段。如果是React、Vue这类框架的项目，还可以结合路由配置的解析，直接把组件路径映射成用户可访问的页面路由，不用手动对应。
• 框架生态自带的调用链路插件：现在很多主流前端构建工具都自带依赖调用分析能力，开启后可以直接导出所有API方法的引用链路，直接定位到具体的页面组件，不用自己写解析逻辑。

运行时采集方案（准确率更高，覆盖动态调用场景） #

静态扫描处理不了动态拼接路径、条件触发、懒加载场景下的接口调用，容易漏判或者误判，运行时采集的结果可信度更高：

• 请求层统一埋点：在前端项目的全局请求拦截器里加埋点逻辑，每次发起API请求时，自动记录当前页面的路由地址、请求的完整端点路径；同时可以给接口返回的响应对象套一层Proxy，自动记录哪些响应属性被前端代码实际读取过。本地启动项目后遍历操作一遍所有页面、功能分支，就能自动导出完整的对应表：每个页面对应调用了哪些API、每个API的响应里哪些字段真的被用到，完全满足后端重构精简响应的需求。
• 本地代理流量录制：如果不想修改前端源码，可以在本地启动一个抓包代理，配置规则匹配所有发往后端的API请求，自动记录每个请求发起时对应的浏览器页面地址，手动遍历操作前端全量功能后，就能导出「API端点-调用页面」的映射表，这个方法的缺点是没法自动统计响应字段的实际使用情况，需要配合前端代码排查补充。

实操的时候建议两种方案搭配用：先用静态扫描快速出初版映射表，再用运行时采集补全动态场景的调用、验证字段使用情况，效率和准确率都能保证。

内容的提问来源于stack exchange，提问作者fahad aijaz