解决前后端分离开发中登录验证码 跨域和session不一致问题

一. 环境说明

使用工具：HBuilderX
使用语言：H5、jQuery、CSS
开发模式：前后端分离

二. 功能说明

前后端分离开发模式下，实现网页的验证登录

• 后端通过工具方法生成随机字符串，前端根据接口获取验证码二进制编码，转换为验证码图片
• 根据登录接口，进行登录验证
• 登录成功获取用户信息

三. 可能会出现的问题点

• 问题点1：获取验证码的时JSESSIONID和登录请求的JSESSIONID不一致
• 问题点2：跨域问题
• 问题点3：后端返回的是验证码图片的字节流，怎么显示在页面上
• 问题点4：验证码点击切换没有效果

四.解决方案

• 问题点1的解决方案：

  • 后端在返回验证码的接口的响应头添加一个session_key
  • 前端获取到响应头的session_key( 获取方式：xhr.getResponseHeader(“session_key”))
  • 在登录验证接口放在请求头返回给后端（实现方式： “headers”: { “session_key”: “验证码接口接收到的session_key”}）
  • 后端获取到请求头的session_key,这样就能保证获取的session_key一致性

• 问题点2的解决方案：

  • 前端设置xhrFields: { withCredentials: true}
  • 后端进行拦截

• 问题点3的解决方案：通过blob的处理，生成一个URL，作为图片的src属性的值，显示验证码图片

• 问题点4的解决方案：加上时间戳，可以实现点击图片换一张的效果

五.实现案例

1. 页面布局

<div class="content">
			<img src="../img/login_bg.png" style="width: 100%;height:100%" />
			<div class="cont">
				<div class="title">
					学生登录入口
				</div>
				<div class="contBanner">
					<div class="contRow">
						<input placeholder="用户名" type="text" id="userName" value="" autocomplete="off" />
					</div>
					<div class="contRow">
						<input placeholder="密码" type