会飞的鱼

2021
分享我的互联网新知
首页 » Vue日常使用 » 记一次vue elment admin 集成验证码跨域处理记录

记一次vue elment admin 集成验证码跨域处理记录

    最近正做着星辰运维的用户中心选型工作,由于考虑到前后端分离同时也想一端开发多端使用,想直接生成app,就有了使用vue的想法,看了很多大神的vue-elment-admin整合教程,终于还是下手搞了,目前进度已经完成了Fastadmin(后端)+Vue+elment ui(前端)+用户中心权限功能集成完成,fastadmin作为api+后台管理,vue+elment ui做前端用户中,整个过程还挺顺利的,就是登陆验证码有点小坑,记录下,下次再遇到好处理。
QQ截图20210516014212.jpg
    由于Vue和fastadmin两者属于前后端分离的结构,作为后端fastadmin创建的验证码(系统默认的验证码功能)每次vue提交都提示验证码错误,通过找资料后得出一个答案,前端访问后端时每次session id都不同,导致后端fastadmin通过sessin生成的验证码每次都不一样,所以验证一直错。

    既然知道原因,选择解决方案吧:
1.重写后端验证码获取逻辑,好多大神这样干,但是比较麻烦,不符合目前开发需求点,我希望保持原框架基础,尽量使用原功能,尽量少做加法加功能导致后期后端升级困难。
2.前端别要验证码吧,上线直接被爆账号都有可能呢。

二选一 还是选 一吧

解决方案:
1.后端保持验证码逻辑不变的基础上,只要再index.php入口文件处加上这句
header("Access-Control-Allow-Origin:http://localhost:1378");//本地调试
用途是跨域访问时验证来路

正式环境用
header("Access-Control-Allow-Origin:*");//正式环境 没试过 有空试吧

2.前端(axios)部分加上 
withCredentials: true, 
用途是前端保存cookie
3.撒花,完成~

通过一顿猛操作验证码就pass的通过了~

文章如无特别注明均为原创! 作者: crx349, 转载或复制请以 超链接形式 并注明出处 crx349博客-智能互联分享博客
原文地址《 记一次vue elment admin 集成验证码跨域处理记录》发布于2021-5-15

分享到:
打赏

评论

游客

看不清楚?点图切换
切换注册

登录

您也可以使用第三方帐号快捷登录

切换登录

注册