微信公众号 H5 JS-SDK wx.config 报错 invalid url domain 及 invalid signature 错误原因及解决方式

这篇具有很好参考价值的文章主要介绍了微信公众号 H5 JS-SDK wx.config 报错 invalid url domain 及 invalid signature 错误原因及解决方式。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

在项目进行JSSDK使用的过程中,出现了很多问题,其中报错invalid url domain 以及 invalid signature最多,也最头疼,部分坑在文档里也并没有写清楚,这里就简单说下这两个报错的原因和解决方式

一、 invalid url domain

当报错invalid url domain时 其实离成功不远了,错误原因也很直白,就是url并没有在公众号设置里正确绑定,需要重点检查几个东西

1. appid 是否是公众号appid(查看在 微信公众平台-> 登陆公众号后台 -> 基本配置-> 开发者ID(AppID))

微信公众号 H5 JS-SDK wx.config 报错 invalid url domain 及 invalid signature 错误原因及解决方式

2. 域名绑定是否正确(查看在 微信公众平台-> 登陆公众号后台 -> 公众号设置-> 功能设置 -> JS接口安全域名)

微信公众号 H5 JS-SDK wx.config 报错 invalid url domain 及 invalid signature 错误原因及解决方式
注意:在域名绑定时,请确定绑定域名与你H5进行wx.config发起域名一致,http与https一致

二、 invalid signature

invalid signature是开发是碰到最多也是真的有大坑的一个报错,基本的错误在文档里都有写清楚,按照官方文档(https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#62) 配置基本能够完成,我这里说一个文档里并没有描述,但是却很容易或者让人很疑惑的坑。

在这个报错的信息里会伴随一个realAuthUrl,我们在开发的时候发现这个报错的realAuthUrl在ios以及安卓里表现不一样,而且在ios中是否刷新也会表现不一样,在查阅了很多文章后终于大概明白了坑点,主要表现如下:

1. ios端微信浏览器进入H5页面时,realAuthUrl是从微信跳进H5的第一个url,也就是说如果在微信公众号点击XXX.com/aa/bb 跳进了H5, 那么H5的realAuthUrl 就是 XXX.com/aa/bb ,也就是我们需要使用去进行signature签名的url, 无论我们在哪个其它路径发起wx.config,都只能传 XXX.com/aa/bb ,这一点就和官方文档写的让我们动态location.href.split(‘#’)[0] 获取地址有冲突了,因为动态获取的路径不一定是初始化进入H5的路径XXX.com/aa/bb 但是有两个例外的情况:

(1)比如我们从 XXX.com/aa/bb 进入H5,但是停留在了 XXX.com/aa/bb/cc 路径下,此时如果我们点击浏览器右上方的操作按钮进行刷新操作, 此时的realAuthUrl又会变成 XXX.com/aa/bb/cc 而不是我们初始进入页面的url

(2)如果我们从 XXX.com/aa/bb 进入H5,然后跳转至 XXX.com/aa/bb/cc 跳转的方式是通过window.location.href跳转而不是框架路由跳转,此时真正的realAuthUrl也会变成 XXX.com/aa/bb/cc

2. 安卓微信浏览器进入H5页面,你在哪个路径发起了wx.config,那么realAuthUrl就是你发起请求的路径,这一点和ios完全不一样,比如是从 XXX.com/aa/bb 进入的H5,但是你真正进行wx.config的路径是 XXX.com/aa/bb/cc/dd?z=xxx 那么 realAuthUrl 就是 XXX.com/aa/bb/cc/dd?z=xxx ,这就和官方文档一致,我们通过动态js获取路径url总能匹配正确的realAuthUrl

原因分析:
IOS端微信浏览器,在我们进入H5后,如果使用框架路由跳转,如navigate,link等跳转,不会真正的修改我们SPA项目的url,所以在wx.config的时候他认定的realAuthUrl是进入H5的第一个url或者进行window.location.href跳转后的url
安卓端微信浏览器,进入H5后无论是框架路由跳转还是其它跳转方式,都会真正的修改SPA项目的url

解决方式:

1.在进入H5后保存进入H5的第一个url,在发起wx.config的时候如果是ios端则使用保存的第一个url,如果是安卓的则动态获取,但是请注意ios的使用保存的第一个url的时候一定要确保过程中没有window.location.href跳转,如果有那么要修改对应保存的url

2.如果我们只在特定的页面需要进行接入JSSDK进行wx.config,我们可以在进入这个页面路径的时候使用window.location.href的方式跳转,这样就保证无论是ios还是安卓端我们的realAuthUrl都是当前发起wx.config的url,直接按照官方文档方式使用文章来源地址https://www.toymoban.com/news/detail-479403.html

到了这里,关于微信公众号 H5 JS-SDK wx.config 报错 invalid url domain 及 invalid signature 错误原因及解决方式的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信分享第三方连接(H5页面)自定义缩略图、标题、描述(显示分享框,而不是链接)(微信JS-SDK)

    首先要说明几个分享相关的问题: 现在微信不支持自定义按钮分享组件(也就是说不能点击某个按钮分享),只能通过微信右上角的三个小点,点击后选择分享给朋友,朋友圈等。 当前从企业微信分享到微信好友和微信朋友圈是有问题的,一些手机(有些是因为app版本,企

    2024年02月09日
    浏览(53)
  • 微信公众号使用wx.config前端如何配置参数

    需引用 jweixin-1.6.0.js 文件 概述 | 微信开放文档          1.获取第一个参数生成签名的时间戳(其实就是获取当前时间) // 时间戳 String timestamp = Long.toString((new Date().getTime()) / 1000);          2.获取第二个签名随机串 // 随机串   (java实现方法,前端可忽略) String nonceS

    2024年03月20日
    浏览(48)
  • JS-SDK微信支付开发攻略

      一、吐槽篇 一个字——坑!两个字——很坑!三个字——非常坑!首先,微信支付接口作为微信开发接口的一部分,竟然有一本书那么厚的官方文档,共36页,更重要的是,这36页还不能把开发的流程说清楚,描述过于分散,过度分类,导致遇到一个问题的时候很难定位,

    2024年02月08日
    浏览(44)
  • 【小程序】微信 JS-SDK的使用:

    一、配置JS安全域名 1 .申请一个安全域名 2 .去微信公众平台下载MP_verify_WCdi1jnSEaGX59y0.txt,并将该文件方法到安全域名下,并确保再安全域名下能访问到这个文件,即http://xxxxxxxx/MP_verify_WCdi1jnSEaGX59y0.txt可以访问 3 .绑定js安全域名 4 .将该安全域名下的IP名单都添加到 公众平台—安

    2024年02月15日
    浏览(40)
  • 微信开发相关:使用微信 JS-SDK 接口

    通过微信 JS-SDK 接口,可以在自己写的 JS 程序中使用很多微信的功能。例如微信里的卡片式链接、拍照上传下载图片、录制播放上传下载音频、获取地理位置、使用摇一摇、扫一扫、微信支付等功能。 微信开发文档 首先需要有一个公众号,该公众号是需要能认证的(企业认证

    2024年02月09日
    浏览(39)
  • 微信公众号H5跳转小程序,wx-open-launch-weapp

    直接上干货,不多哔哔~~ 注意事项 : 需要再公众号里面绑定需要跳转的小程序 获取 jssdk 配置的时候需要再公众平台绑定安全域名 微信版本要求为:7.0.12及以上。 系统版本要求为: iOS  10.3及以上、 Android 5.0及以上。 如若需要在微信的 wx-open-launch-weapp 添加 img 标签, img 的

    2024年02月02日
    浏览(53)
  • feat:使用企业微信JS-SDK的onMenuShareAppMessage()实现点击转发自定义分享内容(TypeScript)

    背景:企业微信应用使用企业微信JS-SDK的分享接口实现分享样式自定义 原生: 需要实现成: 企业微信JS-SDK 是企业微信面向网页开发者提供的 基于企业微信内 的网页开发工具包。 通过使用企业微信JS-SDK,网页开发者 可借助企业微信 高效地使用拍照、选图、语音、位置等手

    2024年02月07日
    浏览(43)
  • vue H5跳转小程序报错:config:fail,Error: 系统错误,错误码:63002,invalid signature

    【相关文档】 微信开发者工具下载地址与更新日志 微信网页开发 /JS-SDK说明文档 微信 JS 接口签名校验工具 全局返回码说明 H5跳转小程序报错:config:fail,Error: 系统错误,错误码:63002,invalid signature,如下: 查看文档:错误码:63002,invalid signature 表示无效的签名: 确认签名算

    2024年02月16日
    浏览(49)
  • 微信 JS-SDK 实现自定义分享、手机选图拍照、图片音频处理、地理位置、摇一摇等功能

    微信 JS-SDK 是微信公众平台 面向网页开发者提供的基于微信内的网页开发工具包 通过使用微信 JS-SDK ,开发者可借助微信高效地使用 拍照 、 选图 、 语音 、 位置 等手机系统的能力 同时可以直接使用 微信分享 、 扫一扫 、 卡券 、 支付 等微信特有的能力,是管理微信一切

    2024年02月09日
    浏览(48)
  • Vue.config.js 配置报错 ValidationError: Invalid options object.

    接手了别人的项目,在配置 devServer 时直接照搬了之前的配置结果报错 这段报错信息意思是Dev Server已使用与API模式不匹配的选项对象初始化,其中明确指出是属性 ‘disableHostCheck’,于是我屏蔽了这个属性,发现能启动成功 此时我查看了之前和这次的项目的webpack的版本发现

    2024年02月11日
    浏览(110)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包