问题遇到的现象和发生背景
我刚刚学习的kaptcha验证码。并在vue中实操了。获取图片成功获取了，但是我提交验证的时候就出问题了。
比如说上图，验证码结果是rcg5
给我返回的是false。
但是如果我拿去直接给地址栏访问
奇了怪了！
求解决！！
问题相关代码，请勿粘贴截图
后端
CaptchaController获取图像
package com.example.demo.kaptcha;
import com.google.code.kaptcha.Constants;
import com.google.code.kaptcha.Producer;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;
import javax.imageio.ImageIO;
import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.awt.image.BufferedImage;
@Controller
//跨域问题
@CrossOrigin
public class CaptchaController {
@Autowired
private Producer captchaProducer;
@Autowired
private static Logger logger = LoggerFactory.getLogger(CaptchaController.class);
@RequestMapping("getimg")
public ModelAndView getKaptchaImage(HttpServletRequest request, HttpServletResponse response) throws Exception {
HttpSession session = request.getSession();
String code = (String)session.getAttribute(Constants.KAPTCHA_SESSION_KEY);
logger.debug("******************验证码是: " + code + "******************");
response.setDateHeader("Expires", 0);
// 设置标准的HTTP/1.1无缓存头信息
response.setHeader("Cache-Control", "no-store, no-cache, must-revalidate");
// 设置IE扩展的HTTP/1.1无缓存头(使用addHeader)
response.addHeader("Cache-Control", "post-check=0, pre-check=0");
// 设置标准HTTP/1.0无缓存报头
response.setHeader("Pragma", "no-cache");
// 返回一个jpeg
response.setContentType("image/jpeg");
// 为图像创建文本
String capText = captchaProducer.createText();
// 将文本存储在会话中
session.setAttribute(Constants.KAPTCHA_SESSION_KEY, capText);
// 用文本创建图像
BufferedImage bi = captchaProducer.createImage(capText);
ServletOutputStream out = response.getOutputStream();
// 导出数据
ImageIO.write(bi, "jpg", out);
try {
out.flush();
} finally {
out.close();
}
return null;
}
}
KaptchaConfig设置图像参数
package com.example.demo.kaptcha;
import com.google.code.kaptcha.impl.DefaultKaptcha;
import com.google.code.kaptcha.util.Config;
import org.springframework.context.annotation.Bean;
import org.springframework.stereotype.Component;
import java.util.Properties;
@Component
public class KaptchaConfig {
@Bean
public DefaultKaptcha getDefaultKaptcha() {
com.google.code.kaptcha.impl.DefaultKaptcha defaultKaptcha = new com.google.code.kaptcha.impl.DefaultKaptcha();
Properties properties = new Properties();
// 图片边框
properties.setProperty("kaptcha.border", "no");
// 边框颜色
properties.setProperty("kaptcha.border.color", "black");
//边框厚度
properties.setProperty("kaptcha.border.thickness", "1");
// 图片宽
properties.setProperty("kaptcha.image.width", "200");
// 图片高
properties.setProperty("kaptcha.image.height", "50");
//图片实现类
properties.setProperty("kaptcha.producer.impl", "com.google.code.kaptcha.impl.DefaultKaptcha");
//文本实现类
properties.setProperty("kaptcha.textproducer.impl", "com.google.code.kaptcha.text.impl.DefaultTextCreator");
//文本集合，验证码值从此集合中获取
properties.setProperty("kaptcha.textproducer.char.string", "01234567890qwertyuiopasdfghjklzxcvbnm");
//验证码长度
properties.setProperty("kaptcha.textproducer.char.length", "4");
//字体
properties.setProperty("kaptcha.textproducer.font.names", "宋体");
//字体颜色
properties.setProperty("kaptcha.textproducer.font.color", "black");
//文字间隔
properties.setProperty("kaptcha.textproducer.char.space", "5");
//干扰实现类
properties.setProperty("kaptcha.noise.impl", "com.google.code.kaptcha.impl.DefaultNoise");
//干扰颜色
properties.setProperty("kaptcha.noise.color", "blue");
//干扰图片样式
properties.setProperty("kaptcha.obscurificator.impl", "com.google.code.kaptcha.impl.WaterRipple");
//背景实现类
properties.setProperty("kaptcha.background.impl", "com.google.code.kaptcha.impl.DefaultBackground");
//背景颜色渐变，结束颜色
properties.setProperty("kaptcha.background.clear.to", "white");
//文字渲染器
properties.setProperty("kaptcha.word.impl", "com.google.code.kaptcha.text.impl.DefaultWordRenderer");
Config config = new Config(properties);
defaultKaptcha.setConfig(config);
return defaultKaptcha;
}
}
login 获取数据并返回布尔值
package com.example.demo.kaptcha;
import com.google.code.kaptcha.Constants;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import javax.servlet.http.HttpServletRequest;
@RestController
//跨域问题
@CrossOrigin
public class login {
@GetMapping("login")
public boolean login(HttpServletRequest request, @RequestParam("code") String code) {
String sessionCode = (String) request.getSession().getAttribute(Constants.KAPTCHA_SESSION_KEY);
if (code.equalsIgnoreCase(sessionCode)) {
// 验证正常返回true
return true;
} else {
// 验证失败返回false
return false;
}
}
}
前端
封装
import axios from 'axios'
export function kaptcha(config) {
let newVar = axios.create({
baseURL: 'http://localhost:8080',
timeout:5000
});
return newVar(config);
}
网页以及方法
<template>
<div>
<h1>图像验证码</h1>
<img src="http://localhost:8080/getimg" id="images">
<br>
<a @click="replace" href="">看不清楚，换一张！</a>
<br>
<input size="20" placeholder="请输入验证码" id="input" />
<br>
<button @click="click">验证</button>
<br>
<a>判断结果：{{this.$data.message}}</a>
</div>
</template>
<script>
import {kaptcha} from "@/network/kaptcha";
export default {
name: 'HelloWorld',
data(){
return{
data:'',
message:''
}
},
methods:{
replace(){
document.getElementById("images").src="http://localhost:8080/getimg";
},
click(){
this.$data.data=document.getElementById("input").value;
kaptcha({
url:'login',
params:{
code:this.$data.data
},
}).then(res=>{
this.$data.message=res.data
}).catch(err=>{
this.$data.message=err.data
})
}
}
}
</script>
<style scoped>
</style>
