后台生成验证码 前台img点击onclick事件 路径后加随机数 get请求

<img onclick="changeCode(this)" id="codeJPG" alt="" src="/code/image" style="cursor:pointer;">

function changeCode(obj) {
    obj.src = "/code/image?" + Math.random();
}

路径后面一定要加随机数，get请求时，会缓存请求。当下一次请求的地址和请求参数不变时，浏览器会使用缓存，而不触发请求。所以要在地址后面加一个动态改变的内容，每点击一次，就请求一次。
后台代码：
@RestController

public class ValidateCodeController {
    public static final String SESSION_KEY = "SESSION_KEY_IMAGE_CODE";
    /**
     * 引入 session
     */
    private SessionStrategy sessionStrategy = new HttpSessionSessionStrategy();

    @Resource
    private ValidateCodeGenerator imageCodeGenerator;
    @GetMapping("/code/image")
    public void createCode(HttpServletRequest request, HttpServletResponse response) throws IOException {
        ImageCode imageCode = imageCodeGenerator.createCode(new ServletWebRequest(request));
        //将随机数 放到Session中
        sessionStrategy.setAttribute(new ServletWebRequest(request),SESSION_KEY,imageCode);
        //写给response 响应
        ImageIO.write(imageCode.getImage(),"JPEG",response.getOutputStream());
    }
    }

public interface ValidateCodeGenerator {
    /**
     * 创建验证码
     */
    ImageCode  createCode(ServletWebRequest request);
   }

public class ImageCodeGenerator implements ValidateCodeGenerator{

    private static Logger LOG = LoggerFactory.getLogger(ImageCodeGenerator.class);

    @Resource
    private JavaMailSender mailSender;

    /**
     * 引入 Security 配置属性类
     */
    private SecurityProperties securityProperties;

    private static final String[] VALIDATECODECHAR = {"a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p",
            "q","r","s","t","u","v","w","x","y","z","A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P",
            "Q","R","S","T","U","V","W","X","Y","Z","1","2","3","4","5","6","7","8","9","0"};

    @Override
    public ImageCode createCode(ServletWebRequest request) {
        //如果请求中有 width 参数，则用请求中的，否则用 配置属性中的
        int width = ServletRequestUtils.getIntParameter(request.getRequest(),"width",securityProperties.getCode().getImage().getWidth());
        //高度（宽度）
        int height = ServletRequestUtils.getIntParameter(request.getRequest(),"height",securityProperties.getCode().getImage().getHeight());
        //图片验证码字符个数
        int length = securityProperties.getCode().getImage().getLength();
        //过期时间
        int expireIn = securityProperties.getCode().getImage().getExpireIn();

        BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);

        Graphics g = image.getGraphics();

        Random random = new Random();

        g.setColor(new Color(232, 245, 243));
        g.fillRect(0, 0, width, height);
        g.setFont(new Font("微软雅黑", Font.BOLD, 23));
        g.setColor(new Color(232, 245, 243));
        String sRand = "";
        int condeLength = VALIDATECODECHAR.length;
        for (int i = 0; i < length; i++) {
            int j = (int) Math.floor(Math.random() * condeLength);
            sRand += VALIDATECODECHAR[j];
            g.setColor(getRandColor());
            int x = 10 + i * 20;//文字在canvas上的x坐标
            int y = (int) (20 + Math.random() * 8);//文字在canvas上的y坐标
            g.drawString(VALIDATECODECHAR[j], x, y);
        }

        for (int i = 0; i <= length + 1; i++) {
            int x = random.nextInt(width);
            int y = random.nextInt(height);
            int xl = (int) (Math.random() * height);
            int yl = (int) (Math.random() * width);
            g.setColor(getRandColor());
            g.drawLine(x, y, x + yl, y + xl);
        }

        for (int i = 0; i <= 30; i++) {
            int x = random.nextInt(width);
            int y = random.nextInt(height);
            int xl = (int) (Math.random() * height);
            int yl = (int) (Math.random() * width);
            g.setColor(getRandColor());
            g.drawLine(x, y, x + 1, y + 1);
        }

        g.dispose();

        return new ImageCode(image, sRand, expireIn);
    }

    /**
     * 生成随机背景条纹
     */
    private Color getRandColor() {
        int r = (int) Math.floor(Math.random() * 256);
        int g = (int) Math.floor(Math.random() * 256);
        int b = (int) Math.floor(Math.random() * 256);
        return new Color(r, g, b);
    }

    public SecurityProperties getSecurityProperties() {
        return securityProperties;
    }

    public void setSecurityProperties(SecurityProperties securityProperties) {
        this.securityProperties = securityProperties;
    }
    }

@Configuration
public class ValidateCodeBeanConfig {

    @Autowired
    private SecurityProperties securityProperties;

    @Bean
    @ConditionalOnMissingBean(name = "imageCodeGenerator")
    /**
     *
     *
     *
     * 在触发 ValidateCodeGenerator 之前会检测有没有imageCodeGenerator这个bean。
     */
    public ValidateCodeGenerator imageCodeGenerator(){
        ImageCodeGenerator codeGenerator = new ImageCodeGenerator();
        codeGenerator.setSecurityProperties(securityProperties);
        return codeGenerator;
    }

}

本文地址：https://blog.csdn.net/nutnutnutnutnut/article/details/112609093