开发微信公众号H5，如何本地调试【爽歪歪】
互联网的搬砖工
已于 2022-12-06 21:43:41 修改
阅读量4.6k
收藏
13
点赞数
3
已于 2022-12-06 21:43:41 修改
阅读量4.6k
收藏
13
点赞数
3
于 2022-12-01 18:25:46 首次发布
前言
最近开发公众号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就行了。
896
暂无认证
到【灌水乐园】发言
互联网的搬砖工: 上年还在用，今年就不知道，如果如你所说，那调试起来会非常麻烦
云雾散尽之际: 这个方案已经不行了吧，现在公众号配置的域名，需要有备案的
没有阑尾: :export 也可以解决
bicoll: 非常感谢，很有用
weixin_43965066:
格老子调了2天。。。。。。。。。。。。原来如此，博主太牛逼了！！！！！！！！！！！！！！！