场景
实际项目中,开发一般有多名,为了方便分别开发和测试,则会部署到不同的域名提测。假设域名有 staging、dev1、dev2…开发提交微信支付相关需求后,经过测试发现 staging 环境域名可支付,而dev1、dev2 环境无法进行微信支付,提示 "当前页面的 URL 未注册"。这就产生了一个问题:既需要在 dev 环境查看页面展示,又需要进行支付操作测试,两者没有兼得。
![a0b87b477c390f9ee92275b6d675ca5a.png](https://i-blog.csdnimg.cn/blog_migrate/43e53590981b51bdf5532a4eba38bcb1.png)
原因
微信支付对域名有限制,开发会预先在微信公众号中设置支付授权域名。前端在触发支付时微信会校验当前域名是否有在商户平台做了配置,否则将验证失败,支付不成功。上述问题场景就是因为 staging 环境域名做了支付域名的授权,而 dev1、dev2 未做支付域名的授权导致。
解决方法
我们可以使用 charles 绕过微信的域名检测,让微信“误以为”页面的域名在 staging ,实际上页面是从 dev 环境中获取。假设 staging 域名为 http://a.b.com,dev 1 环境域名为 a-dev1.b.com,我们要实现查看 dev1页面并完成支付,需要做如下操作:
1、进入 charles > Tools > Map Remote > Add,填写参数值
![3f32597c9f3e80fb6e0ee9bdd9d72da0.png](https://i-blog.csdnimg.cn/blog_migrate/919952efa4a9719e9217d4cac049971f.jpeg)
2、手机连上代理,在微信内打开链接 http://a.b.com,此时不但可查看 a-dev1.b.com 环境下的页面,还能完成支付。
参考链接
https://pay.weixin.qq.com/wiki/doc/api/external/jsapi.php?chapter=7_3