vue-cli + front and rear spring boot end cross-domain separation and session loss solutions

Little nagging

Once upon a time, the project development time is very tight, the project team a lot of people do not understand that is not quite understand vue power of spring boot and mybatic, and had never done before and after the end of the separation, although the project can be completed on schedule, but feel codes mess , so I Once upon a time, a sudden whim, wrote a code generator artifact, hope can avoid some of the repetitive work. Then I encountered a very thorny issue of cross-domain, so there is a record.

Front-end code

axios disposed below

the withCredentials set to true.

rear end

1.application.yml configuration file as shown below

CORS configuration address accessControlAllowOrigin: HTTP: // localhost: 8080 , HTTP: // localhost: 9191

2. Constants class application.yml value below

Variables increase accessControlAllowOrigin

FIG 3.HandlerInterceptor interceptor configured as follows

//*表示允许所有域名跨域
		String[] whiteList = constants.getAccessControlAllowOrigin().split(",");
    	String myOrigin = request.getHeader("origin");
    	boolean isValid = false;
    	for( String ip : whiteList ) {
    		if( myOrigin != null && myOrigin.equals(ip) ){
    			isValid = true;
    			break;
    		}
    	}
    	response.setHeader("Access-Control-Allow-Origin", isValid ? myOrigin : "null");
		//response.addHeader("Access-Control-Allow-Origin", "http://localhost:8080");
		response.addHeader("Access-Control-Allow-Headers",
	            "Origin, X-Requested-With, Content-Type, Accept, Authorization");//服务器支持的所有头信息字段
	    //允许跨域的Http方法
		response.addHeader("Access-Control-Allow-Methods", "GET,POST,PUT,DELETE");
		response.addHeader("Access-Control-Max-Age", "5");//请求的有效期，单位为秒
		response.addHeader("Access-Control-Allow-Credentials","true");//是否可传递信息
		response.addHeader("XDomainRequestAllowed","1");

4.WebMvcConfigurer

package cn.com.css.interceptor;

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

/**
 * @ClassName: WebMvcConfig
 * @Description:系统拦截配置
 * @author: 兰建青
 * @date: 2019年5月11日 下午2:02:48
 * 
 * @Copyright: 2019 中国软件
 */
@Configuration
public class WebMvcConfig implements WebMvcConfigurer {

	@Bean
	SessionInterceptor sessionInterceptor() {
		return new SessionInterceptor();
	}

	@Override
	public void addInterceptors(InterceptorRegistry registry) {
		// 可添加多个
		registry.addInterceptor(sessionInterceptor())
				.addPathPatterns("/**")
				.excludePathPatterns("/user/login")// 登录放行
				.excludePathPatterns("/user/getVerify")// 获取验证码放行
				.excludePathPatterns("/user/checkVerify")// 校验验证码放行
				.excludePathPatterns("/user/logout")// 退出放行
				.excludePathPatterns("/user/registe")// 注册放行
				.excludePathPatterns("/user/test").excludePathPatterns("/user/chackAccount")// 校验正好是否已经存在放行
				.excludePathPatterns("/static/**");// 静态文件放行
	}

	/**
	 * <p>
	 * Title: addResourceHandlers
	 * </p>
	 * <p>
	 * Description: 添加静态资源文件，外部可以直接访问地址
	 * </p>
	 * 
	 * @param registry
	 * @see org.springframework.web.servlet.config.annotation.WebMvcConfigurer#addResourceHandlers(org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry)
	 */
	@Override
	public void addResourceHandlers(ResourceHandlerRegistry registry) {
		// 需要配置1：----------- 需要告知系统，这是要被当成静态文件的！
		// 第一个方法设置访问路径前缀，第二个方法设置资源路径
		registry.addResourceHandler("/static/**").addResourceLocations("classpath:/static/");
	}
	
	/**
	 * <p>Title: addCorsMappings</p>   
	 * <p>Description: 跨域解决</p>   
	 * @param registry   
	 * @see org.springframework.web.servlet.config.annotation.WebMvcConfigurer#addCorsMappings(org.springframework.web.servlet.config.annotation.CorsRegistry)
	 */
	@Override
	public void addCorsMappings(CorsRegistry registry) {
		// 设置允许跨域的路径
		registry.addMapping("/**")
				// 设置允许跨域请求的域名
				.allowedOrigins("*")
				// 是否允许证书 不再默认开启
				.allowCredentials(true)
				// 设置允许的方法
				.allowedMethods("*")
				// 跨域允许时间
				.maxAge(3600);
	}
}

to sum up

1. axios front end withCredentials set to true
2. Check the master Nguyen "Cross-Origin Resource Sharing CORS explain"