SpringBoot实践之---前端跨域问题的解决方案

当我们需要将spring boot以restful接口的方式对外提供服务的时候，如果此时架构是前后端分离的，那么就会涉及到跨域的问题，那怎么来解决跨域的问题了，下面就来探讨下这个问题。

解决方案一：在Controller上添加@CrossOrigin注解

使用方式如下：

[java]  view plain  copy

1. @CrossOrigin // 注解方式  
2. @RestController  
3. public class HandlerScanController {  
4.       
5.       
6.     @CrossOrigin(allowCredentials="true", allowedHeaders="*", methods={RequestMethod.GET,  
7.             RequestMethod.POST, RequestMethod.DELETE, RequestMethod.OPTIONS,  
8.             RequestMethod.HEAD, RequestMethod.PUT, RequestMethod.PATCH}, origins="*")  
9.     @PostMapping("/confirm")  
10.     public Response handler(@RequestBody Request json){  
11.           
12.         return null;  
13.     }  

[java]  view plain  copy

1. }  

解决方案二：全局配置

代码如下：

[java]  view plain  copy

1. @Configuration  
2.     public class MyConfiguration {  
3.   
4.         @Bean  
5.         public WebMvcConfigurer corsConfigurer() {  
6.             return new WebMvcConfigurerAdapter() {  
7.                 @Override  
8.                 public void addCorsMappings(CorsRegistry registry) {  
9.                     registry.addMapping("/**")  
10.                     .allowCredentials(true)  
11.                     .allowedMethods("GET");  
12.                 }  
13.             };  
14.         }  
15.     }  

解决方案三：结合Filter使用

在spring boot的主类中，增加一个CorsFilter

[java]  view plain  copy

1. /** 
2.      *  
3.      * attention:简单跨域就是GET，HEAD和POST请求，但是POST请求的"Content-Type"只能是application/x-www-form-urlencoded, multipart/form-data 或 text/plain 
4.      * 反之，就是非简单跨域，此跨域有一个预检机制，说直白点，就是会发两次请求，一次OPTIONS请求，一次真正的请求 
5.      */  
6.     @Bean  
7.     public CorsFilter corsFilter() {  
8.         final UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();  
9.         final CorsConfiguration config = new CorsConfiguration();  
10.         config.setAllowCredentials(true); // 允许cookies跨域  
11.         config.addAllowedOrigin("*");// #允许向该服务器提交请求的URI，*表示全部允许，在SpringMVC中，如果设成*，会自动转成当前请求头中的Origin  
12.         config.addAllowedHeader("*");// #允许访问的头信息,*表示全部  
13.         config.setMaxAge(18000L);// 预检请求的缓存时间（秒），即在这个时间段里，对于相同的跨域请求不会再预检了  
14.         config.addAllowedMethod("OPTIONS");// 允许提交请求的方法，*表示全部允许  
15.         config.addAllowedMethod("HEAD");  
16.         config.addAllowedMethod("GET");// 允许Get的请求方法  
17.         config.addAllowedMethod("PUT");  
18.         config.addAllowedMethod("POST");  
19.         config.addAllowedMethod("DELETE");  
20.         config.addAllowedMethod("PATCH");  
21.         source.registerCorsConfiguration("/**", config);  
22.         return new CorsFilter(source);  
23.     }  

@Component
public class CrosFilter implements Filter {

    /**
     * 跨域配置
     *
     * @param req http请求
     * @param res http响应
     * @param chain 责任链
     * @throws IOException IO异常
     * @throws ServletException Servlet异常
     */
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) res;
        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, token, language");
        chain.doFilter(req, res);
    }

    /**
     * 初始化配置
     *
     * @param filterConfig 初始化配置参数
     */
    public void init(FilterConfig filterConfig) {
    }

    /**
     * 配置销毁
     */
    public void destroy() {
    }
}

当然，如果微服务多的话，需要在每个服务的主类上都加上这么段代码，这违反了DRY原则，更好的做法是在zuul的网关层解决跨域问题，一劳永逸。

关于前端跨域的更多信息，请参考：http://www.ruanyifeng.com/blog/2016/04/cors.html