开发微信公众号H5，如何本地调试【爽歪歪】

前言

最近开发公众号h5，需要获取公众号用户的code，但是是根据微信公众号提供的方式，是对url地址进行重定向，前提还要在公众号后台配置【网页授权域名】，这玩意还不能是ip地址，也就是说,本地调试不了，盲写完后，每次需要部署到测试环境进行调试，修改一次部署一次，烦死了！！！

解决方案

因为公众号【网页授权域名】不能是ip地址和外网不能访问内网，那么可以借助内网穿透工具。

具体步骤如下

（1）首先先下载natapp或花生壳内网穿透的工具（我用的是natapp，免费版有一个缺点就是公网域名是不定时随机生成的）

（2）按照natapp的图文教程进行相应的配置(图文教程很详细，我就不复制粘贴了，直接点击【图文教程】这个文字链接)

 (3)当你配置完复制如下图圈中的url链接到浏览器，满心欢喜，以为行了！你会发现空白页显示【Invalid Host header】几个字。

因为webpack的devServer会进行hostname检测，如果hostname不是配置内的就中断，默认的hostname是localhost（也就是域名），那怎么解决了，请看第4步。

 （4） 既然hostname检测，那就把当前域名（如图3圈中的域名，不包括http协议），添加到host白名单里面就行了。在devServer配置项，添加属性allowedHosts如下图。最后不要忘了在公众号【网页授权域名】也添加该域名。

 （5）微信公众号有些链接调用必须要在微信浏览器，不然本地浏览器调试也调试不了！莫慌！只要在公众号后台设置【web开发者工具】就可以在微信开发者工具里面进行愉快的调试，大功告成，【爽歪歪】

 

后面可能还有跨域问题，到时前端在webpack的devServer属性开个代理proxy就行了。

 谢谢阅读，有写的不对的，请指出，互相学习一下！