网站微信扫码登录回调不跳转问题

最新推荐文章于 2025-08-31 22:07:37 发布

芒果君君君呀_

最新推荐文章于 2025-08-31 22:07:37 发布

阅读量1w

点赞数

CC 4.0 BY-SA版权

分类专栏：项目问题微信扫码登录文章标签： pc微信扫码登录

本文链接：https://blog.csdn.net/Mangojjx/article/details/91992519

在开发微信扫码登录功能时遇到回调不跳转的问题。通过代码实例展示了如何在点击事件中显示二维码，发现去掉self_redirect后页面不跳转。经过排查，确定是谷歌浏览器跨域的iframe标签导致。在iframe中添加sandbox属性并设置允许脚本、顶级导航和同源策略后，成功解决跳转问题。

最近项目需要开发新功能，微信扫码登录，先上代码：

步骤1：在页面中先引入如下JS文件（支持https）：

http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js

步骤2：在需要使用微信登录的地方实例以下JS对象：（我是在点击事件触发）

var obj = new WxLogin({
 self_redirect:true,//是否在显示的二维码区域跳转，默认是false
 id:"login_container", 
 appid: "", //
 scope: "", 
 redirect_uri: "",//需要微信授权域名一致
  state: "",
 style: "",
 href: ""
 });

以上代码昨晚页面显示了二维码，可以扫码登录，并且跳转，但是只会在二维码区域跳转，于是去掉 self_redirect这一项，结果是并不会跳转页面，于是百度了好多不跳转的原因
然后在大佬的帮助下，最终找到原因：在谷歌浏览器调试的时候，iframe标签跨域问题导致无法跳转。

加上这个代码之后sandbox=“allow-scripts allow-top-navigation allow-same-origin”，刷新页面再测，就没问题了，可以正常跳转了
以下项目中修改代码：

created() {
    // createScript(
    //   "http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"
    // );
    !(function(a, b, c) {
      function d(a) {
        var c = "default";
        a.self_redirect === !0
          ? (c = "true")
          : a.self_redirect === !1 && (c = "false");