前言
最近在做一个vue的外卖项目的登录组件时遇到一个问题,账号密码登录时需要输入后端传过来的图片验证码,输入之后登录不成功,后端返回数据一直是验证码不正确,可输入的验证码明明是正确的。于是我就去服务器打桩输出,结果发现从session中取出的验证码为undefined。登录的大概流程是——服务器生成一个图片验证码发回页面并把值存放到session中,之后再取出的session中的验证码与拿到的页面输入的验证码作比较,相等登录成功,不相等返回验证码错误。最终查询了很多资料发现可能以下有几个方面的原因。
后台服务器
- session需要在路由和设置页面之前进行配置,如果在之后配置则会获取不到session中的值,我们可以试着更改服务器app.js中session的位置。
- 客户端地址不一样,localhost:3000和127.0.0.1看似一样,其实并不一样。向服务器发送请求时会被当成两个客户端
前台客户端
- ajax发送请求时想要带上cookie必须要在ajax请求里加上xhrFields:{withCredentials:true},crossDomaina:true
$ajax({
type: "post",
url: "",
xhrFields:{withCredentials:true},
crossDomaina:true,
data: {}
})
- 使用axios时要在axios的参数中添加withCredentails:true
Vue.prototype.axios = axios
axios.defaults.withCredentails = true
出现了session问题可以从以上方面修改一下。个人博客欢迎交流。