微信客户端使用JSSDK报错invalid signature，但是在微信开发者工具或者网页中调试却是正常

Question

Android的微信客户端在和ReactJS+Webpack+Promise一起使用的时候报错invalid signature，但是在微信开发者工具中调试却是正常的。

1. 在控件生成前，调用的componentDidMount去后台用Ajax获取到微信jssdk配置参数

2. 获取的配置参数和JSSDK的调试模式下console.log里打印出来的一致，每一项值都一致

是否和React或者微信客户端的兼容有关系？
可以排除微信官对于invalid signature的说法，会有什么其他原因导致出现invalid signature呢？

部分代码：

componentDidMount() {
    var url = encodeURIComponent(window.location.href.split('#')[0]);
    this.props.dispatch(fetchWxJssdkConfig(url)).then(() => {
      window.wx.config(this.props.wxJssdkConfig);
    });
  }
}

// 该函数调用后台生成了正确的签名
export function fetchWxJssdkConfig(url) {
  return (dispatch) => {
    return fetch(`${API.wxJssdkConfig}?url=${url}`)
      .then(response => response.json())
      .then(function(config) {
         dispatch(loadWxJssdkConfig(config))
      })
  }
}

Answer 1

校验签名
http://mp.weixin.qq.com/debug...

invalid signature签名错误。建议按如下顺序检查：
确认签名算法正确，可用 http://mp.weixin.qq.com/debug... 页面工具进行校验。
确认config中nonceStr（js中驼峰标准大写S）, timestamp与用以签名中的对应noncestr, timestamp一致。
确认url是页面完整的url(请在当前页面alert(location.href.split('#')[0])确认)，包括'http(s)://'部>分，以及'？'后面的GET参数部分,但不包括'#'hash后面的部分。
确认 config 中的 appid 与用来获取 jsapi_ticket 的 appid 一致。
确保一定缓存access_token和jsapi_ticket。
确保你获取用来签名的url是动态获取的，动态页面可参见实例代码中php的实现方式。如果是html的静态页面在前端通过ajax将url传到后台签名，前端需要用js获取当前页面除去'#'hash部分的链接（可用location.href.split('#')[0]获取,而且需要encodeURIComponent），因为页面一旦分享，微信客户端会在你的>链接末尾加入其它参数，如果不是动态获取当前链接，将导致分享后的页面签名失败。

Answer 2

原因是好像react-router在渲染component后，才修改浏览器的URL。把browserHistory.push改为window.location.href跳转刷新算是零时解决办法...。但是修改windows.location.href会刷新页面，导致原state值丢失..

所有需要使用JS-SDK的页面必须先注入配置信息，否则将无法调用（同一个url仅需调用一次，对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性，所以使用pushState来实现web app的页面会导致签名失败，此问题会在Android6.2中修复）。http://mp.weixin.qq.com/wiki/...

Answer 3

window.dispatchEvent(new Event('load'))
每次向后台请求的时候出发下 load事件 然后可以了

var getWXConfig = function (data) {
        window.dispatchEvent(new Event('load'))
        data = Object.assign({},data);
        let self = this;
        data.ref= window.location.href.split('#')[0];
        api.get('/wx/getShare',{
            params:data
        }).then((response)=>{
            let result = response.data;
            if(result.code == 200){
                self.WXconfig(result.data);
            }
        })
    },

Answer 4

我现在也遇到这个问题了，不知道有小demo吗？