Android WebView 调起H5支付，提示商家参数格式有误

题记 —— 执剑天涯，从你的点滴积累开始，所及之处，必精益求精，便是折腾每一天。

重要消息

• 精通点的能够查看这里 精述
• Flutter 从入门实践到开发一个APP之UI基础篇 视频
• flutter从入门 到精通 系列文章

---

1 引言

场景描述：在APP 中使用webView 显示第三方H5, H5中涉及到微信支付流程，没法正常支付，提示 “商家参数格式有误，请联系商家解决”。

1.1 线索分析

参照微信H5 支付开发官方文档点击这里查看

描述一

通常提示出错，咱们能够先去微信商户管理平台 点击这里查看 配制，固然出错后，也不急着去商户后台去查看配制，由于在开发微信支付功能初期这些都是已经配制好的，固然是在其平台好比 浏览器、Ios UIWebview 等均可以正常的调起支付，那说明在商户后台的配制是没有问题的，不过咱们也能够再次去查看一下商户后台配制的具体值。

描述二

参照微信H5 支付开发官方文档常见问题点击这里查看

在网络发生变更的状况会出现此提示之一

也有提到 “若是是APP里调起H5支付，须要在webview中手动设置referer”，具体内容以下

那么到这里，咱们能够手动的在 Android WebView 中添加头 referer ,这个请求头

• 简言之，HTTP Referer是header的一部分，当浏览器向web服务器发送请求的时候，通常会带上Referer，告诉服务器我是从哪一个页面连接过来的，服务器 籍此能够得到一些信息用于处理。好比从我主页上连接到一个朋友那里，他的服务器就可以从HTTP Referer中统计出天天有多少用户点击我主页上的连接访问他的网站。

• Referer其实应该是英文单词Referrer，不过拼错的人太多了，因此编写标准的人也就将错就错了

在安卓WebView中手动配制请求头 referer

而后再次使用 安卓 WebView 来加载 H5 项目，而后发起微信支付，而后发起成功

分析： 当没有在Android WebView 中添加头 referer 请求头， 一样的 H5 项目，分别在 在 Android WebView 、浏览器、ios UIWebVie 中访问打开，浏览器、ios UIWebVie 中，均可以正常调起支付，只有 Android WebView 中微信支付调起失败，提示商家参数格式有误

当 在Android WebView 中添加头 referer（这个值对应的微信商户平台后台配制的值） 请求头，再次访问一样的 H5 项目，再次调起微信支付，成功。

而后使用抓包方式进一步分析： 在浏览器中对其加载网络分析

而后在 Android WebView 、ios UIWebView 中加载H5 项目 而后对 Android ios 中的WebView 配制抓包代替，而后访问 H5 项目

得出结论 请求头 referer 并无丢失， 而后进一步 抓包分析得出结论 在 Android ios 中加载 H5 项目，请求头 referer 配制的信息 与商户管理后台配制的一至，并无丢失或者是配制错误（固然在ios UIWebView 能支付成功也能够说明）

那么问题来了，在Android WebView 中 若是不配制 请求头 referer 调起失败，咱们须要找出缘由

在 Android WebView 中 没有设置 referer 请求 header 前

mWebView.setWebViewClient(new WebViewClient() {
			@Override

			@Override
			public boolean shouldOverrideUrlLoading(WebView view, String url) {
				
				//使用WebView加载显示url
				view.loadUrl(url);
				//返回true
				return true;
			}
			
			
			// Handle API 21+
			@TargetApi(Build.VERSION_CODES.LOLLIPOP)
			@Override
			public WebResourceResponse shouldInterceptRequest(WebView view, WebResourceRequest request) {
				///获取请求uir
				String url = request.getUrl().toString();
				///获取RequestHeader中的全部 key value
				Map<String, String> lRequestHeaders = request.getRequestHeaders();
				for (Map.Entry<String, String> lStringStringEntry : lRequestHeaders.entrySet()) {
					Log.d("测试header", lStringStringEntry.getKey() + " " + lStringStringEntry.getValue());
				}
				return super.shouldInterceptRequest(view, request);
			}
		});
复制代码

而后 在控制台中查看 调起支付那一下请求的信息

对应的抓包工具中数据

分析数据 得出： 发起微信支付时 referer 丢失

https://wx.tenpay.com/cgi-bin/mmpayweb-bin/checkmweb?prepay_id= 后面省略
复制代码

而后在 Android 中手动配制 referer 后，H5 微信支付调起成功，抓包数据

mWebView.setWebViewClient(new WebViewClient() {
		
			@Override
			public boolean shouldOverrideUrlLoading(WebView view, String url) {
				
				try {
					if (url.startsWith("http:") || url.startsWith("https:")) {
						HashMap<String, String> lStringStringHashMap = new HashMap<>();
						if (!TextUtils.isEmpty(mReffer)) {
							lStringStringHashMap.put("referer", mReffer);
							view.loadUrl(url, lStringStringHashMap);
						} else {
							view.loadUrl(url, lStringStringHashMap);
						}
					} else {
						Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url));
						startActivity(intent);
					}
					return true;
				} catch (Exception e) {
				
				}
				//使用WebView加载显示url
				view.loadUrl(url);
				//返回true
				return true;
			}
			
			@Override
			public void onReceivedSslError(WebView view, SslErrorHandler handler, SslError error) {
				handler.proceed();
			}
			
			
			// Handle API 21+
			@TargetApi(Build.VERSION_CODES.LOLLIPOP)
			@Override
			public WebResourceResponse shouldInterceptRequest(WebView view, WebResourceRequest request) {
				///获取请求uir
				String url = request.getUrl().toString();
				///获取RequestHeader中的全部 key value
				Map<String, String> lRequestHeaders = request.getRequestHeaders();
				Log.e("测试URI",url);
				for (Map.Entry<String, String> lStringStringEntry : lRequestHeaders.entrySet()) {
					Log.d("测试header", lStringStringEntry.getKey() + " " + lStringStringEntry.getValue());
				}
				if (lRequestHeaders.containsKey("Referer")) {
					mReffer = lRequestHeaders.get("Referer");
				}
				return super.shouldInterceptRequest(view, request);
			}
		});
复制代码

结论来了： 在调微信 H5 支付

https://wx.tenpay.com/cgi-bin/mmpayweb-bin/checkmweb
复制代码

请求头 referer 丢失 。

2 关于 Referer 丢失的问题

关于 Referer 丢失的问题 首先 referer 是由客户端的浏览器发送到服务器上，且在客户端能够经过 document.referrer 来获取，也就是说referer的发送其实是一个浏览器行为，发送与否的决定权是在浏览器手里。虽然这样说，可是HTTP协议对什么状况下，浏览器该发送，什么状况下不应发送有着严格的规定。

2.1 分析 Referer 丢失的几种状况

• 1.当网站使用refresh字段进行跳转的时候，大多数浏览器不发送referer

• 2.从用户从一个HTTPS的网站点击连接到另外一个HTTP的网站时，不发送referer

• 3.html5中，a标签的rel = “noreferrer”, 可让浏览器不发送referer

• 4.使用Data URI scheme连接的，浏览器也不发送referer

• 5.使用Content Security Policy, 也可让浏览器不发送referer

• 6.在html头部中使用meta标签来控制不让浏览器发送referer

• 7.在发起支付的时候 android WebView 过滤了 referer，解决方式就是 android WebView 中手动设置 refere 或者修改 H5项目中的微信支付发起的方式。

///在H5项目中发起支付时 
https://wx.tenpay.com/cgi-bin/mmpayweb-bin/checkmweb

///通常可以使用 但会致使 在 android WebView 中丢失referer
<script type="text/javascript">
window.location.href="https://wx.tenpay.com/cgi-bin/mmpayweb-bin/checkmweb?支付信息";
</script>

复制代码

下面两种方式 android WebView 中不会丢失referer

<body>
	<form name="form"> 
	</form> 
 </body>

<scrip>
	document.form.method= "post";     
	document.form.action= "https://wx.tenpay.com/cgi-bin/mmpayweb-bin/checkmweb?支付信息 ";
	document.form.submit(); 
</scrip>

复制代码

jQuery动态建立form表单提交

var action='https://wx.tenpay.com/cgi-bin/mmpayweb-bin/checkmweb?支付信息 ' 
    var form = $("<form></form>")
	form.attr('action', action)
	form.attr('method', 'post')
	//追加到body，不显示，而后提交
	form.appendTo("body")
	form.css('display', 'none')
	form.submit()

复制代码

2.2 分析一 HTTPS变HTTP

有时候须要在API项目中生成一些URL连接返回 可是服务器端已经配置了支持HTTPS，经过HTTPS访问的时候生成的URL仍然是HTTP

从 HTTPS 站点跳到 HTTP 站点 丢失了 Referer，反过来从HTTP到HTTPS是没问题的 不会丢失 Referer

2.3 分析二 微信的支付Referer丢失

从前端请求到 API 整个都没有问题 所有项目已经全线部署了 HTTPS , Referer 信息也有携带 而后只有到最后一步微信的支付请求URL的时候 Referer 就丢失了