公司公众号产品需要支持微信签约,通过后端接口跳转微信的签约页面,然后再mounted方法中获取签约完成后返返回的标识,来执行之后相应的页面步骤。
微信开发文档:微信支付签约
测试过程中很顺利,从出单到核保到签约。。。然这时候测试的小姐姐说签约成功后会跳403?
嗨害,最主要的是这玩意儿还分机型和版本型号,用iphone13测就跳转403其他就没问题。。。
检查了Nginx的配置,前端代码,都没发现有问题
之后去找微信开发文档 , 期望有类似于微信支付成功后的回调地址参数 例如require_web,然并没有
产品就这样在我们瑟瑟发抖的心情中一期上线了
抓包发现,微信的回调页面地址没有获取完整,比如我们发起签约的页面是www.baidu.com/#/a/b,签约成功后应该还在是回调这个b.vue,结果微信的回调地址直接是www.baidu.com,导致了nginx没有配置这个域名。嗨害~~
发现解决这个问题的途径是偶然在刷思否网站时候,有一篇博客提到了类似的问题 ,抱着试一试的想法,结果真成功了。附上小哥的链接:微信签约在部分安卓手机返回404
答案就是使用meta标签referrer属性
<meta name="referrer" content="always" />
这个属性的含义是在某些情况下,网站想要控制页面给服务(server)发送referrer信息。
referrer用来指定当前页面是从哪个页面跳转过来的,即http请求报文头中的referrer包含了跳转至当前页面的上一个页面的url地址
referrer的content值有never、always、origin
- 如果content的值为never:删除请求头中的referer信息;
- 如果content的值origin:只发送origin部分;
- 如果content的值为always:不改变请求头中的referer的值;
- 如果content的值same-origin:同源的链接和引用,会发送referrer,其他的不会;
- origin-when-cross-origin:同源的链接和引用,会发送完全的 referrer 信息;但非同源链接和引用时,只发送源信息
1、跳转微信签约页面
wxPublicContract(productData,proposalNo){
let params = {
productCode : productData.productCode, //产品代码
openid : productData.openid,//openID
contractType : '0',
name : 'xxx',
proposalNo : proposalNo //投保单号
}
getWxPublicContract(params).then(res =>{
if(res.code == 200){
window.location.href = res.content; //跳转签约地址
}else{
this.$toast(res.message)
}
})
},
2、签约成功后,跳转页面
/*
* 签约完成 应该返回到支付页面 路由hash模式会导致微信跳转会截取#号之前的 所以会返回到投保页面 在该页面判断是否签约 跳转至支付成功页面 通过URL参数 from_wxpay=1来判断是否签约
*
*/
var searchURL = window.location.search;
if(searchURL){
searchURL = searchURL.substring(1, searchURL.length);
let from_wxpay = Qs.parse(searchURL)['from_wxpay'];
if(from_wxpay == '1'){
this.fromWxpayVisible = true
let productData = JSON.parse( window.sessionStorage.getItem('productData') );
//分支机构代码
let querybusiness = ''
if(productData.businessOrgCode){
querybusiness = `&businessOrgCode=${productData.businessOrgCode}&salesPartnerCode=${productData.salesPartnerCode}`
}
//setTimeout( ()=>{
window.sessionStorage.removeItem('productData')
window.location.href = `${this.$_config.API.baseURL}${This.$_config.URL.success}/1?id=${productData.proposalNo}&code=${productData.productCode}&newFlag=1${querybusiness}`
//},3000)
}
}
完,感谢观看。