微信授权，修改本地 host

事例项目（webapck+react）

一、原理

（1）本地hosts文件，将本机ip做一个代理

本地host文件配置代理（127.0.0.1 test187.XXX.com）

表明：访问test187.XXX.com的时候，用本地做了代理，运行了本地的代码

（2）关注测试号，用wechat开发者工具打开test187.XXX.com

 

二、常见问题

（1）访问页面时发现出现 Welcome to tengine! 

        ———证明host文件没有配置好

（2）访问页面时发现出现 Invalid Host header

        ———证明webpack没有配置好 

    解决：

    改变package.json中 scripts对象中启动webpack配置的参数

    （改变--allowed-hosts值为test187.XXX.com）

eg.

"start": "webpack-dev-server --config build/webpack.dev.conf.js --watch --allowed-hosts test187.XXX.com"

重启webpack，访问test187.XXX.com即可

 

 

三、微信公众平台：测试号管理

微信公众平台-测试号管理配置页地址：

https://mp.weixin.qq.com/debug/cgi-bin/sandboxinfo?action=showinfo&t=sandbox/index

配置的域名（ 均不带http:// ）均与本地调试访问的域名一致，本地调试访问的域名由host转发访问本地代码

 

1.

 

2.

 

3.

代码中设置为测试号的appid

 

 

注：

做host转发 是为了访问域名时能访问本地代码。

所以在host文件中配置 127.0.0.1 test187.XXX.com，而访问接口就不能再为这个域名，防止把后端接口也给转发至本地导致不能访问