spring cloud-前端跨域问题的解决方案

￡神魔★判官ぃ 2022-05-08 09:50 125阅读 0赞

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

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

使用方式如下：

@CrossOrigin // 注解方式
    @RestController
    public class HandlerScanController { 
    	
    	
    	@CrossOrigin(allowCredentials="true", allowedHeaders="*", methods={ RequestMethod.GET,
    			RequestMethod.POST, RequestMethod.DELETE, RequestMethod.OPTIONS,
    			RequestMethod.HEAD, RequestMethod.PUT, RequestMethod.PATCH}, origins="*")
    	@PostMapping("/confirm")
    	public Response handler(@RequestBody Request json){ 
    		
    		return null;
    	}

解决方案二：全局配置

代码如下：

@Configuration
    	public class MyConfiguration { 
     
    	    @Bean
    	    public WebMvcConfigurer corsConfigurer() { 
    	        return new WebMvcConfigurerAdapter() { 
    	            @Override
    	            public void addCorsMappings(CorsRegistry registry) { 
    	                registry.addMapping("/**")
    	                .allowCredentials(true)
    	                .allowedMethods("GET");
    	            }
    	        };
    	    }
    	}

解决方案三：结合Filter使用  
  
在spring boot的主类中，增加一个CorsFilter

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

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

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

[http_www.ruanyifeng.com_blog_2016_04_cors.html]: http://www.ruanyifeng.com/blog/2016/04/cors.html