springboot2.x + shiro + vue2.X前后端分离跨域问题解决
现在各个企业比较推崇前后端分离开发的模式,后端用springboot 比较多前端一般用三大框架 react 、vue、 angularjs。但是很多小伙伴再做
前后端 分离的时候都会碰到跨域的问题,今天我对前一段时间做的一个前后端分离 项目遇到的跨域问题做下总结,希望能帮助到遇到类似问
题的小伙伴,今天 向大神们学习谢谢博客,不喜勿喷。喜欢的点赞加收藏。
- 首先配置一下WebMvcConfig 实现WebMvcConfigurer 接口。
@Configuration
public class WebMvcConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedMethods("*")
.allowedOrigins("*")// 1允许任何域名使用
.allowedHeaders("*")// 2允许任何头
.allowCredentials(true)
.maxAge(3600L);// 4.解决跨域请求两次,预检请求的有效期,单位为秒
}
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/**");
registry.addResourceHandler("/img/**").addResourceLocations("file:" + UPLOAD_FOLDER_IMG_HEAD);
}
}
- 新建ShiroCorsFilter 实现Filter 接口,此处解决vue前后端分离, delete/put等非简单请求时,由于浏览器在访问后台服务前,会先发priflight请求(method=options),这时仍然会遇到跨域问题,为了解决priflight的请求问题,我们需要定义一个filter,对priflight的请求直接返回200,表示服务器允许priflight请求
@Order(-100)
@Component
@WebFilter(urlPatterns = "/*", filterName = "shiroLoginFilter")
public class ShiroCorsFilter implements Filter {
@Override
public void init(FilterConfig filterConfig) throws ServletException {
}
@Override
public void doFilter(
ServletRequest servletRequest, ServletResponse servletResponse, FilterChain chain)
throws IOException, ServletException {
HttpServletResponse response = (HttpServletResponse) servletResponse;
HttpServletRequest request = (HttpServletRequest) servletRequest;
String orgin = request.getHeader("Origin");
// response.setHeader( "Access-Control-Allow-Origin", config.getInitParameter(
// "AccessControlAllowOrigin" ) );
response.setHeader("Access-Control-Allow-Origin", "*");
// 允许请求的方法
response.setHeader("Access-Control-Allow-Methods", "POST,GET,OPTIONS,DELETE,PUT");
// 多少秒内,不需要再发送预检验请求,可以缓存该结果
response.setHeader("Access-Control-Max-Age", "3600");
// 表明它允许跨域请求包含xxx头
response.setHeader(
"Access-Control-Allow-Headers",
"x-auth-token,Origin,Access-Token,X-Requested-With,Content-Type,Accept,X-Token,Bearer ");
// 是否允许浏览器携带用户身份信息(cookie)
response.setHeader("Access-Control-Allow-Credentials", "true");
// prefight请求
if (request.getMethod().equals("OPTIONS")) {
response.setStatus(200);
return;
}
chain.doFilter(servletRequest, response);
}
@Override
public void destroy() {
}
}