微信签约完成后，403错误解决

公司公众号产品需要支持微信签约，通过后端接口跳转微信的签约页面，然后再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,//openIDcontractType : '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 = truelet 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)}
}

完，感谢观看。