前后端分离实现验证码

最新推荐文章于 2024-01-25 17:13:30 发布

CtrlTab+

最新推荐文章于 2024-01-25 17:13:30 发布

阅读量3.7k

点赞数 5

分类专栏：技巧文章标签： java

本文链接：https://blog.csdn.net/day8th/article/details/104638982

版权

技巧专栏收录该内容

2 篇文章 0 订阅

订阅专栏

问题：

如何实现前后端分离时验证码问题。因为cookie、session因为前后分离时是跨域的，因此无法使用。（准确的说我不知道怎么搞=_=）所有验证码数据不能像原始的开发方式那样存储在session中。因此，需要存储在redis这样的缓存中且设置过期时间,对应的key返回到前端，原理类似sessionId。（不建议存在数据库）

解决

1、前端：img标签中将图片经过BASE64编码的字符串设置在src=“data:image/gif;base64,xxxbase64字符串xxx”，这样可以显示图片。
2、后端接口：将以json格式返回{captchaKey: “xxxUUIDxxx”,image:“xxxbase64字符串xxx”}。

示意代码：

@CrossOrigin
    @GetMapping("/captcha")
    public Map<String,Object> captcha() throws Exception {

        VCodeUtil vc = new VCodeUtil();
        // 字节数组输出流，将其转变为byte[] 后再Base64编码传输到前端
        ByteArrayOutputStream byteOut = new ByteArrayOutputStream();
        vc.saveImage(vc.getImage(),byteOut);
        String vcStr = vc.getText();

        // 将captcha值存入redis，图片放入响应中
        // key ? how to get?
        String captchakey = CommonTool.getUUIDStr();
        System.out.println(captchakey);
        // setCaptchaToRedis("captchakey",vcStr)
        // 只能将图片变为base64编码的字符串才能以json响应传回
        String stringImg = "data:image/gif;base64,"+Base64.getEncoder().encodeToString(byteOut.toByteArray());

        Map<String,Object> map = new HashMap<>();
        map.put("captchakey",captchakey);
        map.put("image",stringImg);
        return map;
    }

前端效果和代码：
在这里插入图片描述

<body>
	<h2>GET/POST数据到后台：</h2>
	<button class="captcha">captcha</button>
	<br>
	<img src="data:image/gif;base64,R0lGODlheAAoAPIAAGAcEgAA/zrMpI8cIv6I8P///2AcEmAcEiwAAAAAeAAoAEII/wALCBxIsKDBgwgTKlzIsKHDhxAjFhBAUYDEiw8DNAygESKBjwQMggwJsSLGhABSFkwJICFHjQNiypwZsyDHhiNJFsgJsiTFkytVAh1Ic8BLlx0X8lzq8+dQgSyjCo1YU+LNpw0rOsXKtevBpT0lavXq8CjQpAxzdjXJlSXCqQzNFhxgEG3CkV/DOmT71K1Bvw6rIrxK0C7Zw4i7Gk7MuLFjsXwfxy0rmeHYymUX29R8V+9OvE0tkpUKuDBhqw9BF1SddSvW0gNh1+UomCDdzWlZD40MVDbGmkdvD1aqW2BxhbxP+vadsHYBunJNE/+4+njCy0NlM28uHCJnkTqtI+bE3hYuxKJWv2Nej1g9+/fwL2oVHb/+0/n2bVLOPzF5/dNI8UcefwAOhxFT8vnHWHQHuVfgdNR95tleCmYn1WzuKfQgQmoRJN54FWIEWFQNbhhXhhLqNFCHFNL3mnlQtYRUR849151AGbJ4n2sWyviXjxrShtCNJq74YUQhRrTdeUYldaN0CrEIVlPlAQmUYEIG2NmExnGJHI/KwfhbdzGZqN5xRxaU5EPLicndXAMVWKSOKapo2ZoNtUnVkydGqRpPob0I15JD8tmnn2BF2KKLPZJ4UY378ScpRkVOaulgKF6qKUEBAQA7" id="verImg">
	

<!--头尾,脚本分界线-->
<script>
var postdata={
	name : "demographics",
	params : [1 , 2, 3],
	items : [
		{name : "中文", value : 10 },
		{name : "数学",  value : 20 }
	]
};

$(function(){
	$(".captcha").click(function(){
		$.ajax({
	        //contentType : 'application/json;charset=utf-8',
			url : 'http://localhost:8082/fleamarkt/captcha',
	        type : 'GET',
	        data : {
				
			},
	      	success: function(res, textStatus) {
				console.log(res)
				$('#verImg').attr('src', res.image);
			},
			error: function() {
				alert("访问失败！");
			}
			
     	});
	});
	
});
</script>

</body>