微信授权存在的跨域问题以及解决方法

【问题描述】

在前后端彻底分离的情况下,当我们的前端通过Ajax访问某个后台提供的接口地址的时候,浏览器会提示错误(通过查看控制台查看),并且不能看到微信授权后的结果。总而言之就是出现了跨域问题。

【第一种解决方法】

后台代码不要企图一次性完成所有的授权服务并且直接返回一个包含授权成功后获得的用户信息的Json数据,因为这样做虽然后台容易实现了但是前端却会遇到跨域的问题。

解决方法就是分步完成,首先我们访问前台,前台通过ajax技术访问后台,后台访问微信端数据,特别注意这个时候我们填写的回调地址是前端的地址也就是一个html地址,然后前台拿到了数据之后再次ajax提交给后台,后台再次处理,与微信端打交道,然后再次……

总而言之就是把授权这份工作分步骤完成并且这个分步骤是前后端还有微信端都需要参与的。

这种方法需要注意的是前后端事先要约定好回调地址究竟是后台的哪个地址,不可改变。如果改变的话后台的代码或者配置文件也需要改变。

【第二种解决方法】

这种方法同样需要一份协议:前后端需要约定好授权成功后返回的前端地址。也就是说,用户直接访问的是后台授权的地址,后台授权过程中与微信端进行交互的过程前台不参与,授权成功后,后台将会跳转到某一个前端的地址,这个地址必须是事先约定好的,前端在这个地址上书写解析数据类型的代码即可。如果前端的这个地址改变的话,后台同样需要修改java代码或者是配置文件。(注:授权成功后前后端交互有几种方式,可以考虑后台用写url的方式传递数据给前端,也可以考虑写入session域,然后由前台被访问时ajax从后台中拿到session域中的数据)

总而言之就是授权过程中前端浑然不知,知道用户访问前台的时候前台才会调用相应的js函数进行数据的获取或者解析。

我个人比较喜欢第二种方式,但是第一种方式也很不错。如果有遇到什么问题欢迎交流。

有一个比较具体的授权例子(java),可以参考一下https://blog.csdn.net/smileyan9/article/details/82714610

    原文作者:smile-yan
    原文地址: https://blog.csdn.net/smileyan9/article/details/82467910
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞