1. 条件

• 本地一个uniapp的H5项目（本地运行 localhost:8080）
• 本地一个webservice接口项目（本地运行 127.0.0.1:9999）

目的：
因微信公众号没有提供良好的测试体验环境，每次测试时又需要授权域名，而且必须是https的。我们也不方便映射一个域名到自己本机（局域网环境不一定有固定的公网ip）
为了完成使用localhost也能在本地开发和调试微信公众号H5，记录一下自己的实施方案

2. 准备一个https域名(test.wxh5.poemfar.com)

微信公共公众号配置业务域名需要https

• 公众号后台下载验证文件上传到该域名的根目录下（这里是我自己准备的linux服务器和nginx，相关配置这里不详述，如果这块条件自己不具备，可联系我免费帮忙验证，这样你可以共用我这个方向代理的域名进行本地测试）
• 填写业务域名、jsapi安全域名、网页授权域名
• 验证完成

3. 反向代理该域名到本地站点

这里有好几个方案，如：nginx、设置本机host和端口转发、其他proxy。我这里是mac，使用最简单的hosts和端口转发来实现
基本原理：hosts转发上一步的域名到127.0.0.1，然后使用端口转发8080到80

• 设置hosts(mac os)

sudo vim /etc/hosts

# Host Database
#
# localhost is used to configure the loopback interface
# when the system is booting.  Do not change this entry.
##
127.0.0.1       localhost
255.255.255.255 broadcasthost
::1                 localhost
127.0.0.1       test.wxh5.poemfar.com

• 测试一下，访问：http://test.wxh5.poemfar.com:8080

这里如果报错：Invalid Host header
则是因为新版的webpack-dev-server出于安全考虑，默认检查hostname，如果hostname不是配置内的，将中断访问。
解决办法：
在manifest.json中配置：devServer: { disableHostCheck: true}

• 通过mac的pf实现端口转发