项目场景:
微信扫码登录,前台获取微信扫描二维码,手机微信扫描之后,携带用户的数据跳转到页面的首页
问题描述:
获取微信扫描二维码时,需要从微信官方给定的地址跳转到自己写的前端页面,由于域名和端口号不同,因此会产生跨域问题,如图所示:
仔细思考出现跨域问题的场景,我们从后端拿到微信二维码的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值无法传递给前端的问题,我会在下一篇博客分享给大家,感谢大家的关注。