vue-cli+spring boot前后端分离跨域及session丢失解决办法

小小的唠叨

曾几何时，项目开发时间很紧，项目组很多的人即不懂vue也不大懂spring boot及mybatic的强大之处，也没有做过前后端分离，项目虽然可以按期完成了，但感觉代码很乱，于是又曾几何时，突然心血来潮，写了一个代码生成神器，希望可以免去一些重复性的工作。然后遇到了一个很棘手的跨域问题，故有此一记。

前端代码

axios设置如下图

将withCredentials设置为true。

后端

1.application.yml文件里配置如下图

配置CORS的地址accessControlAllowOrigin: http://localhost:8080,http://localhost:9191

2.使用application.yml的值Constants类如下图

增加accessControlAllowOrigin变量

3.HandlerInterceptor拦截器配置如下图

//*表示允许所有域名跨域
		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);
	}
}

总结

1.前端的axios的withCredentials设置为true
2.请查看阮大师的《跨域资源共享 CORS 详解》