IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> 微信公众号 H5 JS-SDK wx.config 报错 invalid url domain 及 invalid signature 错误原因及解决方式 -> 正文阅读

[JavaScript知识库]微信公众号 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))

1654567224(1).jpg

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

image.png
注意:在域名绑定时,请确定绑定域名与你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,直接按照官方文档方式使用

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-06-14 22:29:05  更:2022-06-14 22:32:45 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/23 16:43:12-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码