Springboot2.x + shiro + vue2.X resolución de problemas entre dominios de separación de front-end y back-end

Springboot2.x + shiro + vue2.X resolución de problemas entre dominios de separación de front-end y back-end

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

1. Primero configure WebMvcConfig para implementar la interfaz 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. Cree un nuevo ShiroCorsFilter para implementar la interfaz Filter, aquí para resolver la separación de los extremos delantero y trasero de vue, delete/put y otras solicitudes no simples, porque el navegador primero enviará una solicitud de verificación previa (método = opciones) antes de acceder a la servicio en segundo plano, en este momento todavía encontramos un problema de dominio cruzado, para resolver el problema de solicitud de priflight, necesitamos definir un filtro, la solicitud de priflight devuelve 200 directamente, lo que indica que el servidor permite la solicitud de 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() {
    
    }
}