微信jsapi签名报错config:invalid url domain和config:invalid signature问题

背景

记录下最近遇到了jsapi签名的报错：

config:invalid url domain
config:invalid signature

排查步骤

1. 先根据官方文档的步骤先排查一遍

这是常规的解决办法，大部分的报错都是这些原因导致的，请确认没问题再往下排查
参考：

企业微信：https://developer.work.weixin.qq.com/document/path/90509
公众号附录5：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html

2. 疑难杂症的处理

2.1 在微信中失败，在企业微信正常

这个主要针对的是企业微信的自建应用（猜测是企业微信的老应用没有同步问题），可以尝试一下这个操作：

可信域名删掉，保存；再重新填写，保存
停用当前应用，然后再启用应用

参考：https://developer.work.weixin.qq.com/community/question/detail?content_id=16482772538882061888

2.2 在iOS系统失败，在安卓正常

问题原因：获取签名时，安卓应为实时域名，iOS应为首次进入域名
解决办法：

解法1：链接通过location.href这类方法打开，而不是使用vue、react的路由。
解法2：判断是iOS且非企业微信时，把页面首次地址记录到window下的变量中，获取签名时取该地址作为签名地址，可参考https://blog.csdn.net/Sweet__Cat/article/details/88591688

解法2,vue2处理方案代码：

// router.js在页面首次进入时把url存放到`window._ios_entry_url_`变量中

// 判断是否是ios系统
export function isIos () {
  return /(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)
}

// 判断是否是企业微信
export function isWxWork () {
  return /wxwork/i.test(navigator.userAgent)
}

router.beforeEach((to, from, next) => {
  // 企业微信没有该问题，因此只针对微信内做处理
  if (isIos() && !isWxWork() && !window._ios_entry_url_) {
    // 此处不可使用location.replace
    window._ios_entry_url_ = window.location.href
  }
  next()
})



// 在需要获取签名的地方如page.vue，传参url时区分iOS和企业微信
let webUrl = window.location.href
  if (isIos() && !isWxWork() && window._ios_entry_url_) {
    // 在ios系统，vue history模式的url不会变，会一直是首次访问的链接：https://www.fengerzh.com/jssdk-invalid-signature/
   // 否则会出现签名失败的问题
   webUrl = window._ios_entry_url_
}
// 发起请求获取签名
getWechatConfig({ webUrl })

参考：