SpringBoot解决跨域问题
前后端分离是目前的趋势, 解决跨域问题也是老生常谈的话题了,我们了解一下什么是域和跨域。
域:协议 + 域名 + 端口;三者完全相同则为同域,反之有其一不同均为不同域。
跨域请求:当前【发起请求】的域和【请求指向】的域属于不同域时,该次请求称之为跨域请求。
非同源限制
【1】无法读取非同源网页的 Cookie、LocalStorage 和 IndexedDB
【2】无法接触非同源网页的 DOM
【3】无法向非同源地址发送 AJAX 请求
java 后端 实现 CORS 跨域请求的方式
对于 CORS的跨域请求,主要有以下几种方式可供选择:
- 返回新的CorsFilter
- 重写 WebMvcConfigurer
- 使用注解 @CrossOrigin
- 手动设置响应头 (HttpServletResponse)
- 自定web filter 实现跨域
注意:
- CorFilter / WebMvConfigurer / @CrossOrigin 需要 SpringMVC 4.2以上版本才支持,对应springBoot 1.3版本以上
- 上面前两种方式属于全局 CORS 配置,后两种属于局部 CORS配置。如果使用了局部跨域是会覆盖全局跨域的规则,所以可以通过 @CrossOrigin 注解来进行细粒度更高的跨域资源控制。
- 其实无论哪种方案,最终目的都是修改响应头,向响应头中添加浏览器所要求的数据,进而实现跨域
官网对cors的说明与使用
SpringBoot 2.4.0版本后解决跨域问题(较之前的版本有些变化)
按照以前的版本写法会有以下报错
java.lang.IllegalArgumentException: When allowCredentials is true, allowedOrigins cannot contain the special value “*” since that cannot be set on the “Access-Control-Allow-Origin” response header. To allow credentials to a set of origins, list them explicitly or consider using “allowedOriginPatterns” instead.
错误说我们要使用allowedOriginPatterns来代替之前的addAllowedOrigin(“*”),
看下allowedOriginPatterns源码
public CorsConfiguration setAllowedOriginPatterns(@Nullable List<String> allowedOriginPatterns) { if (allowedOriginPatterns == null) { this.allowedOriginPatterns = null; } else { this.allowedOriginPatterns = new ArrayList(allowedOriginPatterns.size()); Iterator var2 = allowedOriginPatterns.iterator(); while(var2.hasNext()) { String patternValue = (String)var2.next(); this.addAllowedOriginPattern(patternValue); } } return this; }
从源码看出,它接受一个集合或者说数组的参数所以可以这样使用来代替之前的addAllowedOrigin(“*”)
CorsConfiguration config = new CorsConfiguration(); List<String> allowedOriginPatterns = new ArrayList<>(); allowedOriginPatterns.add("*"); config.setAllowedOriginPatterns(allowedOriginPatterns); //config.setAllowedOriginPatterns(Collections.singletonList("*"));同上
1.返回新的 CorsFilter(全局跨域)
在任意配置类,返回一个 新的 CorsFIlter Bean ,并添加映射路径和具体的CORS配置路径。
@Configuration
public class GlobalCorsConfig {
// 当前跨域请求最大有效时长。这里默认1天
private static final long MAX_AGE = 24 * 60 * 60;
@Bean
public CorsFilter corsFilter() {
//1. 添加 CORS配置信息
CorsConfiguration config = new CorsConfiguration();
//放行哪些原始域
List<String> allowedOriginPatterns = new ArrayList<>();
allowedOriginPatterns.add("*");
config.setAllowedOriginPatterns(allowedOriginPatterns);
//config.setAllowedOriginPatterns(Collections.singletonList("*"));同上
config.setAllowCredentials(true);
//放行哪些请求方式
config.addAllowedMethod("*");
//放行哪些原始请求头部信息
config.addAllowedHeader("*");
//暴露哪些头部信息
config.addExposedHeader("*");
config.setMaxAge(MAX_AGE);
//2. 添加映射路径
UrlBasedCorsConfigurationSource corsConfigurationSource = new UrlBasedCorsConfigurationSource();
corsConfigurationSource.registerCorsConfiguration("/**",config);
//3. 返回新的CorsFilter
return new CorsFilter(corsConfigurationSource);
}
}
2. 重写 WebMvcConfigurer(全局跨域)
@Configuration
public class CorsConfig implements WebMvcConfigurer {
static final String[] ORIGINS = new String[] {"GET", "POST", "PUT", "DELETE","OPTIONS"};
@Override
public void addCorsMappings(CorsRegistry registry) {
// 所有的当前站点的请求地址,都支持跨域访问。
registry.addMapping("/**")
//是否发送Cookie
.allowCredentials(true)
//放行哪些原始域
.allowedOriginPatterns("*")
//当前站点支持的跨域请求类型是什么
.allowedMethods(ORIGINS)
// 允许请求头中的header,默认都支持
.allowedHeaders("*")
//响应头中允许访问的header,默认为空
.exposedHeaders("*")
//预请求的结果的有效期,默认30分钟,这里为一天
.maxAge(24 * 60 * 60);
}
}
3. 使用注解 (局部跨域)
Spring 4.2后提供了@CrossOrigin
注解,该注解可以标注于方法或者类上,包含了以下属性:
属性 | 含义 |
value | 指定所支持域的集合, |
origins | 同value |
allowedHeaders | 允许请求头中的header,默认都支持 |
exposedHeaders | 响应头中允许访问的header,默认为空 |
methods | 支持请求的方法,比如 |
allowCredentials | 是否允许cookie随请求发送,使用时必须指定具体的域 |
maxAge | 预请求的结果的有效期,默认30分钟 |
在控制器(类上)上使用注解 @CrossOrigin:,表示该类的所有方法允许跨域。
使用注解的话最好加在类上,你要是加在方法上的话,如果有多个方法,只会生效第一个,其它方法即使加上注解也不能跨域(亲测)
@RestController
@CrossOrigin(origins = "*")
public class HelloController {
@RequestMapping("/hello")
public String hello() {
return "hello world";
}
}
在方法上使用注解 @CrossOrigin:
@RequestMapping("/hello")
@CrossOrigin(origins = "*")
//@CrossOrigin(value = "http://localhost:8081") //指定具体ip允许跨域
public String hello() {
return "hello world";
}
4. 手动设置响应头(局部跨域)
使用 HttpServletResponse 对象添加响应头(Access-Control-Allow-Origin)来授权原始域,这里 Origin的值也可以设置为 “*”,表示全部放行。
@RequestMapping("/index")
public String index(HttpServletResponse response) {
response.addHeader("Access-Allow-Control-Origin","*");
return "index";
}
5. 使用自定义filter实现跨域
首先编写一个过滤器,可以起名字为MyCorsFilter.java
@Component
public class MyCorsFilter implements Filter {
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", "x-requested-with,content-type");
chain.doFilter(req, res);
}
public void init(FilterConfig filterConfig) {}
public void destroy() {}
}
在web.xml中配置这个过滤器,使其生效
<!-- 跨域访问 START-->
<filter>
<filter-name>CorsFilter</filter-name>
<filter-class>com.mesnac.aop.MyCorsFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>CorsFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
<!-- 跨域访问 END -->