记录贴

验证码原理

在写登录页面验证码功能时，采用Happy-Captcha验证码模块，先介绍一下验证码原理，

打开登录页面时，前端获取后端生成的验证码图片，此时后端会记录前端的JSESSIONID，并以JSESSIONID为key,验证码图片对应的验证码字符串为value存入session

当我们点击提交时，前端向后端提交验证码，后端会以JSESSIONID为key取出对应的value

问题就出现在这，我用的是前后端分离，前端是vscode+vue+axios ,部署在localhost：7000端口。

后端是intellij+springboot+tomcat 部署在localhost：8080端口

解决跨域访问问题

前端点击登录提交验证码时，采用Ajax技术，即axios提交验证码到后端，此时网络报错，因为前端与后端并没有部署在同一域中，怎么解决参考

SpringBoot解决跨域问题_springboot跨域配置-CSDN博客

当然此时只是解决跨域访问问题，并没有解决session ID不一致问题，axios跨域提交验证码的session ID 与登录页面请求后端验证码图片的session ID并不相同，导致你不管输入什么验证码，判断都是不正确的，因为此时key是不对的，取出来的为null。

前端提交的数据，后端不能通过request.getParam拿到

中间还有一个小问题，没出现的人不用管，在解决上述问题之后，发现前端提交的数据，后端不能通过request.getParam拿到，怎么解决的参考这篇帖子，我用的方案一

axios发送post请求后台request.getParameter接不到参数_axios.post request.getparamter null-CSDN博客

onLogin() 绑定的登录按钮，

解决session ID不一致问题

我参考了很多帖子，都没有什么效果，但是第二天打开vscode和intellij启动前后端项目时，发现莫名奇妙好了，我就一直改昨天自己修改的部分，然后重启，发现改了当前login.vue文件里面axios提交数据的一段代码时，session ID又不一样了。所以目前认为是在axios里面添加withCredentials:true这句话就能解决问题

最后贴一张大图，防止有人不知道在哪里加这句话