微信扫描二维码登录的跳转重定向被浏览器阻止

<script type="text/javascript" src="https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>
在index.html和需求页面都加入以上代码,可以正确引入生成二维码功能。

<script
	type="text/javascript"
	src="https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"
></script>

引入微信的扫码js文件后,页面会重定向到redirect_uri设置的地址
!(https://img2024.cnblogs.com/blog/3673451/202508/3673451-20250806094108018-690400268.png)
为了阻止浏览器重定向,需要在生成二维码后,加入以下代码,以改变iframe源码

this.$nextTick(() => {
  var obj = new WxLogin({
    self_redirect: false,
    id: "wx_login_container",
    appid: "wxxxxxxxxxxxxxxxx",
    scope: "snsapi_login",
    redirect_uri: "http://xxxxxxxxxxxxxx",
    state: "xxxxxxxxxxxxxxx",
    style: "black",
    stylelite: 1,
  });
  //当new WxLogin后,iframe已经被嵌入到我们指定的id容器内了
  let wxIframeEle = document.querySelector('#wx_login_container iframe');
  // 对嵌入的微信iframe设置以下属性,可以阻止浏览器默认对重定向的拦截
  wxIframeEle.setAttribute(
    'sandbox',
    'allow-top-navigation allow-same-origin allow-scripts',
  );
  wxIframeEle.src = `${wxIframeEle.src}&self_redirect=true`;

参考文章:感谢
https://juejin.cn/post/7169790319259549726

posted on 2025-08-06 09:47  jv_coder  阅读(72)  评论(0)    收藏  举报