kaptcha验证码不显示解决办法

前端Vue+ 后端Springboot、Mybatis的弱鸡项目

1. 不显示具体情况：前后端启动项目都不报错且验证码请求200，但是验证码无法显示
   

2. 后端配置类如下：

• CorsConfig：

package com.haipali.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowCredentials(true) //是否发送Cookies
                .allowedOrigins("*")    //放行原始域位置
                .allowedMethods(new String[] {"GET", "POST"})
                .allowedHeaders("*");    //放行原始请求头信息
    }
}

• KaptchaConfig:

package com.haipali.config;

import com.google.code.kaptcha.impl.DefaultKaptcha;
import com.google.code.kaptcha.util.Config;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;

import java.util.Properties;

/**
 * 验证码配置
 */
@Configuration
public class KaptchaConfig {
    @Bean
    public DefaultKaptcha getDefaultKaptcha(){
        DefaultKaptcha defaultKaptcha = new DefaultKaptcha();
        Properties properties = new Properties();
        properties.setProperty("kaptcha.border", "yes");
        properties.setProperty("kaptcha.border.color", "105,179,90");
        properties.setProperty("kaptcha.textproducer.font.color", "blue");
        properties.setProperty("kaptcha.image.width", "100");
        properties.setProperty("kaptcha.image.height", "38");
        properties.setProperty("kaptcha.textproducer.font.size", "30");
        properties.setProperty("kaptcha.textproducer.char.length", "4");
        properties.setProperty("kaptcha.textproducer.font.names", "宋体,楷体,微软雅黑");
        properties.setProperty("kaptcha.session.key", "code");
        Config config = new Config(properties);
        defaultKaptcha.setConfig(config);
        return defaultKaptcha;
    }
}

• ShiroConfig

package com.haipali.config;

import com.haipali.shiro.AccountRealm;
import org.apache.shiro.authc.credential.HashedCredentialsMatcher;
import org.apache.shiro.mgt.SecurityManager;
import org.apache.shiro.spring.web.ShiroFilterFactoryBean;
import org.apache.shiro.web.mgt.DefaultWebSecurityManager;
import org.springframework.boot.web.servlet.FilterRegistrationBean;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.filter.DelegatingFilterProxy;

import java.util.LinkedHashMap;
import java.util.Map;

@Configuration
public class ShiroConfig {
    /**
     * 认证匹配器
     * @return
     */
    @Bean
    public HashedCredentialsMatcher hashedCredentialsMatcher(){
        HashedCredentialsMatcher matcher = new HashedCredentialsMatcher();
        matcher.setHashAlgorithmName("MD5"); //设置加密方式
        matcher.setHashIterations(1024); //设置加密次数
        matcher.setStoredCredentialsHexEncoded(true); //设置存储凭证
        return matcher;
    }

    /**
     * 自定义身份认证
     * @return
     */
    @Bean
    public AccountRealm customRealm(){
        AccountRealm myShiroRealm = new AccountRealm();
        myShiroRealm.setCredentialsMatcher(hashedCredentialsMatcher());
        return myShiroRealm;
    }

    /**
     * shiro安全管理器
     * @return
     */
    @Bean
    public DefaultWebSecurityManager securityManager(){
        DefaultWebSecurityManager manager = new DefaultWebSecurityManager();
        manager.setRealm(customRealm());
        return manager;
    }

    /**
     * 过滤器
     * @return
     */
    @Bean
    public FilterRegistrationBean filterRegistrationBean(){
        FilterRegistrationBean filterRegistrationBean = new FilterRegistrationBean();
        DelegatingFilterProxy proxy = new DelegatingFilterProxy(); //过滤器代理
        proxy.setTargetFilterLifecycle(true); //设置生命周期
        proxy.setTargetBeanName("shiroFilter"); //设置bean名称
        filterRegistrationBean.setFilter(proxy);
        return filterRegistrationBean;
    }

    /**
     * Shiro过滤工厂
     * @return
     */
    @Bean("shiroFilter")
    public ShiroFilterFactoryBean shiroFilterFactoryBean(SecurityManager securityManager){
        ShiroFilterFactoryBean shiroFilterFactoryBean = new ShiroFilterFactoryBean();
        shiroFilterFactoryBean.setSecurityManager(securityManager); //设置安全管理器
        //设置拦截器
        Map<String,String> filterChainDefinitionMap = new LinkedHashMap<>();
        filterChainDefinitionMap.put("/guest/**,", "anon"); //设置游客权限
        filterChainDefinitionMap.put("/user/**","roles[user]"); //设置用户角色权限
        filterChainDefinitionMap.put("/admin/**","roles[admin]"); //设置管理源角色权限
        //设置开发登录接口
        filterChainDefinitionMap.put("/login","anon");
        filterChainDefinitionMap.put("/captcha","anon");
        filterChainDefinitionMap.put("/logout","anon");
        //设置其余接口一律拦截
        filterChainDefinitionMap.put("/**","authc");
        //配置shiro默认登录界面地址
        shiroFilterFactoryBean.setLoginUrl("/unauth");
        shiroFilterFactoryBean.setFilterChainDefinitionMap(filterChainDefinitionMap);
        return shiroFilterFactoryBean;
    }
}

• WebMvcConfig

package com.haipali.config;

import com.haipali.interceptor.TokenInterceptor;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

import java.util.Arrays;

@Configuration
public class WebMvcConfig implements WebMvcConfigurer {
    @Autowired
    private TokenInterceptor tokenInterceptor;

    @Override
    public void addInterceptors(InterceptorRegistry registry) {
        registry.addInterceptor(tokenInterceptor) //添加token拦截器
                .addPathPatterns("/**") //设置拦截路径
                .excludePathPatterns(Arrays.asList("/login","/logout","/captcha","/unauth")); //过滤不拦截路径
    }

}

3. 解决方法
   跨域配置CorsConfig中的addCorsMappings方法
   删除允许发送cookies：.allowCredentials(true)
   
4. 验证码返回成功图
   
5. 总结
   淘宝找小哥调试花了40米踩的新手入的小坑吧，我也搞不清楚加了cookies的发送为啥会影响验证码的显示
   全网搜了很久没有跟我一样的情况故写下我的亲身经历吧 共勉