在浏览器上调试公众号网页的操作流程

痛点说明

在实际开发过程中，公众号或者小程序开发都涉及到授权登录，我们最初原始的做法都是写好代码后，发布在测试环境中，然后再进行调试，有一个头痛的点在于如果你要验证你的想法，改动js的话，那么必须重新打包编译。打包和发布都是非常耗时的。引出痛点：是不是可以在开发环境的热更新过程中实现调试公众号网页呢？

需要理解的点：

1、公众号是一个h5的页面，在开发者工具和在浏览器去发起网络请求，渲染页面都是一样的。不要神话公众号的网页。
2、后台的接口在能不能通，在于后台的接口对授权凭证的限制
3、后台的接口只是想要一个凭证，证明你已经微信授权过了
4、微信授权的步骤在开发工具中走掉，后台的授权凭证就有了
5、有了授权凭证就放在每次请求的http头部协议里面
6、web server可以通过中间件代理http请求

下面介绍的是有了凭证之后，怎么具体实现，以VUE为例子。
跟微信交互获取access-token，access-token是我们的服务器跟微信交互的凭证。通常有两种方法把access-token用于接口凭证交互。服务端通过access-token来判断用户是否登录微信，获得授权，以及微信配置信息。
第一种做法是后台服务器通过一个接口暴露这个access-token给前端，前端拿到后，对所有接口请求进行加工，比如加密后放在请求的headers['Authorization']="Basic access-token";
第二种做法是后端在后台静默地将access-token写入当前浏览器的cookie值。（中间可能时sha256编码或者其他方式转化过的）。

无论哪种方法，本质在于发出请求的时候，需要一个值验证用户的微信授权登录状态，接口才能暴露数据。

具体实现

利用node-http-proxy中间件，在监听请求事件中修改Header的参数配置，这样使得所有接口请求头都加入了access-token凭证（无论是Authorization还是cookie).

以vue-cli生成的项目为例，在vue.config.js文件中设置：

  devServer: {host: '', // target hostport: 8080,proxy: { // 代理指的是当前项目的"/"请求到target: 'http://test.xxxxxx.com',这个请求过程被devServer劫持代理'/': {changeOrigin: true, // 代表可以允许跨域target: 'http://test.xxxxxx.com', // 后端服务器地址logLevel: "debug", // 打印日志的方式打印出具体的转发信息onProxyReq (proxyReq, req, res) { // 注册事件proxyReq.setHeader('cookie', 'access-token=d9bb4586') // 如果是通过cookie写入proxyReq.setHeader('Authorization', 'Basic d9bb4586') // 如果是通过Authorization方式写入},},}}

值的获取

上面的案例中，值是怎么来的？
第一种情况，后台会提供一个生成accessToken的接口，通过postman调用获取。这中间的技术栈可能是填你的手机号码后，模拟你的手机微信登录。
第二种cookie形式的，可以自己通过开发工具，授权登录后在请求的header头里面找到cookie值，这个cookie值是后台写到微信浏览器上的。

值的有效期

通常这种登录凭证的值，时间取决于后台开发，由于微信的限制，最多是24小时。故而对于我们调试来说，足够了。如果时间设置的太短，可以让后台在测试环境开放长一点的时间。

掉过的坑

我最开始摸索的时候，填入了一个假值，也就是如我代码那样，我想测试查看一下是不是真的会修改cookie值。然后大失所望，我怀疑这个方法未被调用，即使我在onProxyReq 事件中打印log也毫无反应，断点也无法捕捉到。心灰意冷地时候，我用开发工具获取一个新的cookie值，正确的值，然后填入proxyReq.setHeader('cookie', 'access-token=d9bb4586') 里面，意想不到的画面既然是接口通过了，数据返回了。
原因是我武断认为我的配置，应该在本机浏览器发出的请求上反映出来，如果我配置的cookie=1,那么浏览器上显示也应该是1. 而恰恰偏离了代理服务器的初衷。也就说代理服务器这一层设置，我们是看不见的。

配置好代理服务器时前端在浏览器中展示的是请求地址不是自己配置后得转发转发地址

综上

通过代理服务器的配置，携带上接口需要的验证值，这样就实现了在本地开发环境中调试微信公众号网页。