微信授权 10003

最近用微信上授权, 本地测试一切正常,部署后一直提示10003, 网上其他说的配置不加http等等, 都排查了,是不是; 最后发现:

微信的 redirect_uri 不支持带端口 !!!!!  坑爹

因为我们的前端地址就是需要带端口, 解决方案:  

1, 新建一个 before.html 文件, 放到任意一台服务下, 作为一个中转页. 例如: 访问地址为: http://abc.efg.com/before.html       [切记可以不加端口访问]

2, 前端代码里的跳转微信去授权携带的 redirect_uri 就是 http://abc.efg.com/before.html  ,  这个地址需要encodeURIComponent()编码一下这个不用多说吧.

3, 然后微信公众平台那边的配置域名就是:  abc.efg.com , 其他的就不多说了

最后上前端代码: 

只是部分代码,  REDIRECT_URI 是我的一个配置, 也就是那个before.html的部署后的地址

if (to.matched.some(record => record.meta.requireAuth)) { // 判断是否需要登录权限
    // 如果不存在code则跳转授权
    if (isEmpty(code)) {
      // 本地路径
      let local = REDIRECT_URI; // REDIRECT_URI是我配置的跳转地址
      // 公众号appid
      let url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=` +
      appId +
        `&redirect_uri=${encodeURIComponent(
          local
        )}&response_type=code&scope=snsapi_base&state=1#wechat_redirect`
        console.log(url, '跳转地址')
      //不存在就打开下面的地址进行授权
      window.location.href = url
    } else {
      if (!isEmpty(sessionStorage.ownString)) {
        next()
      } else {
        getMsgstring(code, next)
      }
    }
  } else {
    next()
  }

再上一下 中转页before.html的全部代码

<script>
    function getParam(variable) {
       var query = window.location.search.substring(1);
       var vars = query.split("&");
       for (var i = 0; i < vars.length; i++) {
               var pair = vars[i].split("=");
               if (pair[0] == variable) {
                   return pair[1];
               }
       }
       return false;
    }
</script>

<script>
    var code = getParam("code");
    if (code) {
      location.replace("http://aaa.bbb.com:8080/web-front/#/?code=" + code)
    } 
</script>

希望能帮到你~~