微信扫码登录出现的跨域问题

项目场景：

微信扫码登录，前台获取微信扫描二维码，手机微信扫描之后，携带用户的数据跳转到页面的首页

---

问题描述：

获取微信扫描二维码时，需要从微信官方给定的地址跳转到自己写的前端页面，由于域名和端口号不同，因此会产生跨域问题，如图所示：

---

仔细思考出现跨域问题的场景，我们从后端拿到微信二维码的Url地址，然后从让后端重定向到二维码界面，出现跨域问题。 那么我们是否可以换一个思路呢？既然从后端无法成功重定向，那就从前端发起请求，跳转地址。

解决方案：

我们不再让wxLogin获取二维码的方法重定向到二维码界面，而是让他把生成好的二维码Url地址返回给前端，让前端自己通过window.location.href = url 这样的命令发起页面跳转，成功解决，这样就不会出现跨域问题了！

让大家看一下 后端返回值：

 baseUrl = String.format(
                baseUrl,
                ConstantWxUtil.WX_OPEN_APP_ID,
                redirectUrl,
                "bailuo"
        );
        return Result.ok().data("baseUrl",baseUrl);
        }

前台页面的代码展示

 //获得微信登录二维码链接
    getQRCode(){
      loginApi.getQRCode().then(response =>{
       this.baseUrl = response.data.data.baseUrl
      })
    },
    //跳转到微信二维码界面
    toWeiXinCode(){
      loginApi.getQRCode().then(response =>{
       this.baseUrl = response.data.data.baseUrl
         window.location.href = this.baseUrl

      })
    },

---

获取二维码出现跨域问题的解决方案就在这里啦，希望可以帮助到大家，关于微信生成二维码之后扫描登录，关于第三方的callback回调方法的token值无法传递给前端的问题，我会在下一篇博客分享给大家，感谢大家的关注。