SpringBoot实践之---前端跨域问题的解决方案
2018-01-18 17:09
651 查看
当我们需要将spring boot以restful接口的方式对外提供服务的时候,如果此时架构是前后端分离的,那么就会涉及到跨域的问题,那怎么来解决跨域的问题了,下面就来探讨下这个问题。
@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;
}
[java] view plain copy}
public class MyConfiguration {
@Bean
public WebMvcConfigurer corsConfigurer() {
return new WebMvcConfigurerAdapter() {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowCredentials(true)
.allowedMethods("GET");
}
};
}
}
*
* 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);
}
@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
解决方案一:在Controller上添加@CrossOrigin注解
使用方式如下:[java] view plain copy@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;
}
[java] view plain copy}
解决方案二:全局配置
代码如下:[java] view plain copy@Configurationpublic 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[java] view plain copy/***
* 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);
}
@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
相关文章推荐
- spring cloud-前端跨域问题的解决方案
- Spring boot 遇到前端报错Access-Control-Allow-Origin 跨域问题
- Spring Boot 处理前端跨域问题
- springBoot之过滤器解决前端跨域问题
- springboot+jsonp解决前端跨域问题小结
- springBoot 打war包 程序包com.sun.istack.internal不存在的问题及解决方案
- [置顶] spring boot项目实战:跨域问题解决
- 前端遇到的跨域问题及解决方案二
- spring boot返回date类型给前端,显示的是毫秒的问题
- 前端跨域问题各种解决方案
- Spring Boot使用CORS解决跨域问题
- springboot解决跨域问题
- [置顶] spring boot项目实战:跨域问题解决
- 前端跨域问题的几种解决方案
- springboot vue 登陆发送请求(跨域问题)02
- springboot vue (跨域问题)
- SpringBoot 跨域问题
- [置顶] spring boot项目实战:跨域问题解决
- 前端遇到的跨域问题及解决方案一
- SpringBoot学习——@Autowired自动注入报:could not be found问题的理解和解决方案