微信网页授权出现跨域(使用easywechat的oauth中间件)

问题描述

前后端分离开发;
前端页面test.aaaa.com 请求 api.aaaa.com/test 接口(这里的跨域使用fruitcake/laravel-cors中间件解决了);
接口api.aaaa.com/test 用laravel写的;使用了easywechat的oauth中间件,此接口在微信内置浏览器直接请求没有问题;
但是在前端页面test.aaaa.com 请求 api.aaaa.com/test 接口时,接口api.aaaa.com/test会重定向到微信授权的链接,出现跨域错误。

错误截图

微信网页授权出现跨域(使用easywechat的oauth中间件)

百度到的解决方法

【第一种解决方法】

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

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

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

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

【第二种解决方法】

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

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

最后

求完美解决方案:pray:

《L01 基础入门》
我们将带你从零开发一个项目并部署到线上,本课程教授 Web 开发中专业、实用的技能,如 Git 工作流、Laravel Mix 前端工作流等。
《L03 构架 API 服务器》
你将学到如 RESTFul 设计风格、PostMan 的使用、OAuth 流程,JWT 概念及使用 和 API 开发相关的进阶知识。
讨论数量: 8

搬个凳子,坐等大师帮忙解决!

1周前 评论

page 1 -> 统一授权登录页面 -> 根据来路跳转回去....

1周前 评论

用扫描登录啊!没有登录之前不用身份认证,登录以后再用token 不久可以了嘛!

1周前 评论

nginx的特性是啥 :sunglasses:

1周前 评论

@嘿喵财运旺旺 不明白啥意思

1周前 评论
嘿喵财运旺旺 1周前
Derek 6天前
嘿喵财运旺旺 6天前
Derek 6天前

@crazy 对 目前就是这样做的

1周前 评论

楼主最终怎么解决的呢?

6天前 评论

@Derek page 1 -> 统一授权登录页面 -> 根据来路跳转回去.... 就是这个 没有用easywechat自带的中间件,按照easywechat文档写的授权,然后授权回调,在回调时再根据第一次得来路跳转回去

6天前 评论
Derek 6天前

请勿发布不友善或者负能量的内容。与人为善,比聪明更重要!