前言
之前给各位小伙伴整理过，H5实现支付支付。# Vue实现移动端H5支付宝支付篇 。今天给大家补充一下，在微信实现H5支付应该怎么整？
实现代码
因需求比较简单，只需要简单的在浏览器完成支付。所以暂时没有考虑在微信能支付的情况。
直接上代码：
//直接跳转链接
// #ifdef H5
window.location.href = res.data
// #endif
// #ifdef APP
plus.runtime.openURL(res.data)
// #endif
请求成功，跳转成之后发现了新问题 如图所示：
官方文档
-
当前调起H5支付的referer为空导致，一般是因为直接访问页面调起H5支付，请按正常流程进行页面跳转后发起支付，或自行抓包确认referer值是否为空
-
如果是APP里调起H5支付，需要在webview中手动设置referer，如(
Map extraHeaders = new HashMap();
extraHeaders.put("Referer", "商户申请H5时提交的授权域名"); //例如 www.baidu.com )
参考地址: pay.weixin.qq.com/wiki/doc/ap…
解决方案
出现此问题的核心原因是你在开发环境下的来源（referer）是localhost：8080；而公司在微信支付那边申请的h5支付域名没有这个。因此微信支付后台就会给出这样的返回。
总结：
就是referer其实不需要进行配置，在测试环境上就能后正常使用；但是有一个缺点就是每次代码做了修改，都需要进行测试环境的发布，比较麻烦。
