前言
分享一下这段时间的一个工作经历：对接第三方平台时，对方只会提供一台跳板机，以及只有跳板机能访问的内网ip（通过内网ip可以访问前端页面，后端接口，数据库，最重要的是第三方平台的api），此时该方案比较适用
准备工作
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)) if(oSession.url.indexOf(origin_host)!=-1){ //MessageBox.Show(oSession.url) oSession.fullUrl = oSession.fullUrl.Replace(origin_host,replace_host); } }
最后在OnBeforeRequest中调用上述函数，就可以了
static function OnBeforeRequest(oSession: Session) { var origin_host = 'websakura.diehunter1024.work/api/' var replace_host = '10.5.24.108/api/' ReplaceUrl(oSession, origin_host, replace_host) ...... }
保存一下代码，重启软件就可以达到以下效果，请求域名的接口全部被替换成了跳板机上的接口
