微信支付-使用Natapp实现本地内网进行开发测试以及解决webpack "Invalid Host header"问题
1.微信开发的无奈
最近接手的系统在做微信支付,可是微信的支付授权目录要求必须是外网域名且不支持ip地址
我了个亲娘来,那好吧,直接在服务器上进行开发测试,结果微信支付太多bug,在服务器测试不方便,那咋办呀!!!能否在本地继续开发测试,又能按照微信支付授权目录的规则呢?
使用Natapp等进行内网穿刺即可
2.什么Natapp呢?
natapp 基于ngrok的反向代理软件，通过在公网和本地运行的 Web 服务器之间建立一个安全的通道。natapp 可捕获和分析所有通道上的流量，便于后期分析和重放.
简单说就是通过此软件获取一个域名,使外网的人能通过这个域名访问到我们的内网.
官方网站:Natapp
3.如何使用Natapp呢?
- 点击首页的 立即下载
- 选择要下载的版本,我是 windows 64 位
- 下载完毕后,点击右上角的 免费注册 ,注册完成后点击 登录 ,登录成功需 实名认证
- 认证完成后点击 购买隧道 -> 免费隧道 [有能力的童靴可以根据自己的条件购买] (也可参考官方文档 https://natapp.cn/article/natapp_newbie 教程进行操作)
各种产品比较请自行查看. - 购买并创建隧道
- 点击 我的隧道 进行查看 (此处重点记一下 authtoken)
- 打开刚下载的natapp文件夹
按shift+鼠标右键 在此处打开命令窗口 输入 natapp -authtoken=Xxx Xxx为刚才所注意的authtoken
进入成功后显示以下界面
Tunnel Status Online 代表链接成功
Version 当前客户端版本,如果有新版本,会有提示
Forwarding 当前穿透 网址 或者端口
Web Interface 是本地Web管理界面,可在隧道配置打开或关闭,仅用于web开发测试
Total Connections 总连接数
Avg Conn Time 0.00ms 这里不代表,不代表,不代表 延时,需要注意!
- 微信支付授权目录配置 Forwarding 对应的网址 此处为 http://ugsmmv.natappfree.cc
注:因为 Forwarding 对应的网址 每次打开都会更换,所以每次都需要重新配置一下微信支付授权目录 - 输入 Forwarding 对应的网址即可进行访问
- 出现的问题:对于本系统来说,因为使用vue做的前端开发,所以配置好网址后会出现错误
页面出现 Invalid Host header问题
出现问题原因：
这是由于新版的webpack-dev-server出于安全考虑，默认检查hostname，如果hostname不是配置内的，将中断访问。
解决方法：
可以在build目录中的webpack.base.config.js中添加如下webpack-dev-server配置：
找到 module.exports ={} 在其内部添加,devServer: { disableHostCheck: true, },
保存后重新启动即可