vue-cli+spring boot前后端分离跨域及session丢失解决办法
前后端分离跨域笔记小小的唠叨前端代码后端小小的唠叨曾几何时,项目开发时间很紧,项目组很多的人即不懂vue也不大懂spring boot及mybatic的强大之处,也没有做过前后端分离,项目虽然可以按期完成了,但感觉代码很乱,于是又曾几何时,突然心血来潮,写了一个代码生成神器,希望可以免去一些重复性的工作。然后遇到了一个很棘手的跨域问题,故有此一记。前端代码axios设置如下图将with...
·
小小的唠叨
曾几何时,项目开发时间很紧,项目组很多的人即不懂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 详解》
更多推荐
已为社区贡献5条内容
所有评论(0)