使用Fiddler Everywhere进行代理配置

最近在项目遇到一个代理转发配置的问题，在微信开发者工具跑本地的代码，但是有登录、注册等页面。这些页面需要获取用户基本信息（如用户的头像、微信名等），所以需要网页授权获取用户基本信息。如下图：

如果在本地IP地址或者localhost去访问的话，是请求不到微信服务器的，所以这个时候需要做一下反向代理。
用本地的IP地址在微信上去获取权限的页面如下：

这个时候就用到Fiddler Everywhere了。
先配置Fiddler Everywhere，点击右上角的设置。如图：

HTTPS里面这两个选项是视自己的情况而定，如果部署到公众号上的线上链接是https，那就勾选，并且点击勾选框上面绿色的地方，下载证书。

Connections这一项很重要，特别是端口号的配置，这个端口号的配置一定要和微信开发者工具上的设置的代理设置端口号一样。

Gateway、Privacy、Composer用默认的配置就好。

反向代理配置==重新定义响应数据

Match Condition配置的是要匹配代理的地址正则表达式----这个是测试公众号线上的页面地址（url）
Action配置的是映射的地址----如果本地调试，就填本地的项目页面地址（本地访问的项目页面地址）
Match Condition配置可以用这个正则表达式 regex:(?inx)^ http://mgadmin-dat.antech.ltd/mobile(?.+)$
其中这个http://mgadmin-dat.antech.ltd/mobile是测试公众号线上的页面地址
Action配置的是http://162.16.10.83:9090/mobile${name}，这个是本地的项目页面地址。
配置好之后，开始配置微信开发者工具上的代理配置。

第二张图中的IP地址配置本地的IP地址，端口号配置在Fiddler Everywhere上配置好的端口号。

在微信开发者工具上输入的链接地址一定是在微信公众号上配置的链接地址（也就是在Fiddler Everywhere配置的Match Condition中的地址）。

好，所有的配置项都已经配置完了，可以进行正常的访问和调试了。
本地有什么改动，会在页面直接反映出来，相当于在本地调试了。

最后总结一下这个代理流程：

微信开发者工具上配置的代理请求到Fiddler Everywhere上—>Fiddler Everywhere会做抓包---->匹配Fiddler Everywhere本地配置的Match Condition---->匹配成功后进行响应数据的替换，替换成action配置的本地页面。（类似于工具postman）

Fiddler Everywhere配置的端口号和微信开发者工具配置的端口号设置一致，是因为Fiddler Everywhere会监听这个端口号下的请求，进行抓包，然后进行响应数据的替换。

通过一张图来看一下Fiddler Everywhere界面上的工具（这张图是借鉴别人的，非常感谢）

实践出真知，在代理过程中还是会遇到很多问题：
我先说一下问题点，按照上面的配置流程，把代理都配置好了。但是真正去请求数据的时候报500，而且还是本地的域名进行访问的，这是什么情况？

然后把整个流程都梳理了一遍，最终弄清了原因，也理解了这一套的代理流程。

流程如下：

1、访问测试环境的页面—>代理到本地的页面（代理到本地页面后，本地页面会发送请求）---->本地的请求（在webpack.config.js里面配置proxy代理，代理到测试环境的域名）---->代理请求到测试环境—>返回测试环境的数据---->然后加载到本地页面中---->达到本地调试的目的。

我的问题是出在了 没有把本地的请求代理到测试环境上，所以在本地的webpack.config.js文件中配置proxy（当然也可以在Fiddler Everywhere直接配置这个接口不进行代理，但是就不灵活了）

proxy: {
      '/sdms': {
        target: 'http://opsd.sd.anyisdtecher.ltd/',
        changeOrigin: true
      }
    }

2、触类旁通：本地的页面通过配置代理是可以访问测试环境的数据的。