1
回答
前后端分离 图片验证码实现
【腾讯云】校园拼团福利,1核2G服务器10元/月!>>>   

我请教个问题,一般我们常见的图片验证码如下图,在前后端分离的架构上前端和后端是怎样实现的? 感激不尽

<无标签>
举报
123as打算
发帖于1年前 1回/1K+阅
共有1个答案 最后回答: 1年前

前端使用原生ajax,如

       var oReq = new XMLHttpRequest();
    
    oReq.open("GET", configs.RESTFUL_URL+"/common/get/captcha", true);

    oReq.responseType = "blob";
    oReq.onreadystatechange = function () {
        if (oReq.readyState == oReq.DONE) {
            var blob = oReq.response;
            var obj = {};
    
            obj.imgSrc = URL.createObjectURL(blob);
            console.log(obj.imgSrc);
        }
    }
    oReq.send(); 

后端代码主要代码 

BufferedImage image = ...;

ByteArrayOutputStream out= new ByteArrayOutputStream();

ImageIO.write(image, "jpeg", out);

rest接口直接返回out.toByteArray()就行了,别忘了设置response的Content-Type=image/jpeg

--- 共有 2 条评论 ---
kse-music 回复 @123as打算 : 图片上的随机数你得缓存在后台,至于你用什么缓存,看你选择了,比如:session、ehcache、redis等,然后前台把数字发过来,你再从缓存中取出来做对比 1年前 回复
123as打算感谢啊,还有一个问题怎么根据用户输入的验证码去和后台传的验证码图片进行匹对?一个是文字一个是图片 1年前 回复
顶部