springboot2.x + shiro + vue2.X前后端分离跨域问题解决

springboot2.x + shiro + vue2.X前后端分离跨域问题解决

	  	现在各个企业比较推崇前后端分离开发的模式，后端用springboot 比较多前端一般用三大框架 react 、vue、 angularjs。但是很多小伙伴再做  
	  前后端 分离的时候都会碰到跨域的问题，今天我对前一段时间做的一个前后端分离 项目遇到的跨域问题做下总结，希望能帮助到遇到类似问  
	  题的小伙伴，今天 向大神们学习谢谢博客，不喜勿喷。喜欢的点赞加收藏。

1. 首先配置一下WebMvcConfig 实现WebMvcConfigurer 接口。

@Configuration
public class WebMvcConfig implements WebMvcConfigurer {

 @Override
   public void addCorsMappings(CorsRegistry registry) {
       registry.addMapping("/**")
               .allowedMethods("*")// 3允许任何方法（post、get等）
               .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);
 }
}

2. 新建ShiroCorsFilter 实现Filter 接口，此处解决vue前后端分离， delete/put等非简单请求时，由于浏览器在访问后台服务前，会先发priflight请求(method=options)，这时仍然会遇到跨域问题，为了解决priflight的请求问题，我们需要定义一个filter，对priflight的请求直接返回200，表示服务器允许priflight请求

/**
 * @description:
 *     到method=delete/put等非简单请求时，由于浏览器在访问后台服务前，会先发priflight请求(method=options)，这时仍然会遇到跨域问题，为了解决priflight的请求问题，我们需要定义一个filter，对priflight的请求直接返回200，表示服务器允许priflight请求
 * @author:houqd
 * @time: 2020/3/11 16:54
 */
@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;
    // 允许哪些Origin发起跨域请求
    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() {}
}