基于内网穿透+Fiddler的私有化项目调试前端解决方案_onbeforerequest()

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以添加戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

• toDesk（控制跳板机）
• 内网穿透工具****（部署本地前端项目）
• Fiddler****（更改远程请求接口）
• 可以本地部署的前端项目

意义

我们使用反证法，如果不这么做，在对接第三方的时候有以下缺点：

• 代码更新需要发版解决，每次调试需要重新打包部署，十分耗时间
• 控制台无法直接调试源码，只能查看webpack或者其他打包工具编译后的产物
• 线上环境屏蔽了debugger调试困难
• 不灵活，无法动态切换页面（如切换起始页）

若使用该方案可以有效解决上述问题

整体思路

实现过程

本地起一个服务，记住项目类型的端口号，用于内网穿透，如：127.0.0.1:9999或0.0.0.0:9999，使用内网穿透将端口映射到外网中，如何使用内网穿透可以参照**这篇文章**各大平台也会提供文档，不多做赘述。在本地浏览器通过对应的映射ip或域名能访问到本地调试运行的页面就说明成功了。

此时我们在跳板机上也可以通过输入映射ip或域名的方式来访问本地启动的项目，那么此时还剩下一个问题：后端请求接口怎么办？由于前端页面服务在本地而非跳板机上，会导致前端的项目请求时仍然无法访问到跳板机局域网中的接口。

经过一番折腾后最后用fiddler+JScript脚本解决了问题

过程及踩坑如下：

• 本地化部署：不现实，无法访问第三方提供的OpenAPI
• nginx反向代理：接口提示304，修改较大
• Fiddler重定向：和nginx一样，http状态码报304重定向

下面我详细分享一下fiddler+JScript的方式解决

fiddler作为一款比较优秀的抓包软件，开发人员自然是要信手拈来

而说到fiddler更有意思的地方，就是JScript（语法和js很像）一款运行在Fiddler的脚本，基于它，我们可以拓展出更多的功能

我们的目的是将匹配到的请求，在请求发起之前修改为跳板机上的请求地址

• 首先我们打开规则的自定义规则

• 找到OnBeforeRequest函数，这个函数是截取拦截器，参数是req的所有参数
• 在全局写个ReplaceUrl函数，用来将请求url替换成另一个

static function ReplaceUrl(oSession, origin_host, replace_host){
    // MessageBox.Show(oSession.url.indexOf(origin_host))


![img](https://img-blog.csdnimg.cn/img_convert/4961addb0051fa298c7ae365168ffdb0.png)
![img](https://img-blog.csdnimg.cn/img_convert/5d698dbc80edce7df83b9cf52a07c8d0.png)

**既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上C C++开发知识点，真正体系化！**

**由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新**

**[如果你需要这些资料，可以戳这里获取](https://bbs.csdn.net/topics/618668825)**

项目、大纲路线、讲解视频，并且后续会持续更新**

**[如果你需要这些资料，可以戳这里获取](https://bbs.csdn.net/topics/618668825)**