使用Fiddler Everywhere进行代理配置持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第18天，点击查看活动详情

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

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

用本地的IP地址在微信上去获取权限的页面如下：

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

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

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

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

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

Match Condition配置的是要匹配代理的地址正则表达式----这个是测试公众号线上的页面地址（url）
Action配置的是映射的地址----如果本地调试，就填本地的项目页面地址（本地访问的项目页面地址）

配置好之后，开始配置微信开发者工具上的代理配置。

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

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

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

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

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

通过一张图来看一下Fiddler Everywhere界面上的工具

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

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

流程如下：

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

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

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

这是我之前发表在其他平台上的原创文章。

不管风吹浪打，胜似闲庭信步！

我们下篇文章再见！