跨域
前端和后端的跨域问题，主要是由于浏览器同源策略的限制，同源一般指相互请求资源的两个域的协议、域名（主域名以及子域名）和端口号都相同，其中任何一个不相同就会出现跨域请求被限制的问题。
同源策略的限制主要是为了避免浏览器受到 XSS、CSFR 等的攻击；同源策略限制的内容有 Cookie、LocalStorage、IndexdDB 等存储数据；Dom节点；AJAX 请求被拦截；但是 img 标签的 src 属性、a 标签的 href 属性以及 script 中的 src 属性是可以跨域加载资源的
跨域并不是请求发不出去，后端是可以收到前端请求并且正常的返回结果的，只是结果被浏览器给拦截了。
CORS
CORS（Cross-Origin Resource Sharing）是一种跨域资源共享技术标准，是目前解决前端跨域请求的主流方案，它支持多种 HTTP 请求方法（JSONP 只支持 GET 请求）。根据请求方法的不同，在处理上也有所不同：
简单请求：浏览器直接发送请求，并在请求头中增加一个Origin字段指定页面的域，如果服务端支持该跨域请求则会在响应头返回Access-Control-Allow-Origin字段来告诉浏览器哪些域可以请求该资源，后边浏览器会根据该字段的值决定是否限制跨域请求，满足以下条件属于简单请求：
- 请求方式只能是：GET、POST、HEAD
- HTTP请求头限制这几种字段：Accept、Accept-Language、Content-Language、Content-Type、Last-Event-ID
- Content-type只能取：application/x-www-form-urlencoded、multipart/form-data、text/plain
复杂请求：请求方法是 PUT、DELETE，或者 Content-Type 类型是 application/json 的请求就是复杂请求，这些跨域请求会在正式发送前先发送一次OPTIONS类型的预检请求，预检请求头Origin用来指定发送请求的浏览器页面的域、Access-Control-Request-Method用来指定跨域请求类型；服务端如果允许该跨域请求则会在响应头返回对应的字段Access-Control-Allow-Origin、Access-Control-Allow-Method（允许跨域的请求类型）、Access-Control-Max-Age（预检请求的有效期，单位秒），预检请求完成后的就会发送真正的请求，步骤和简单请求基本一致
下边介绍的具体解决方案也是基于 CORS 的后端解决方案。
@CrossOrigin
@CrossOrigin(origins = "*")
@RestController
public class HelloController {
// @CrossOrigin(origins = "*")
@GetMapping("/hello")
public String hello() {
return "hello";
}
}
@CrossOrigin注解可以用在控制器类上，此时该控制器中的所有接口都支持跨域；也可以用在指定接口上，让这个接口支持跨域访问。可以看到@CrossOrigin需要配置在每个控制器类中，属于局部配置，无法做到一次性配置，会有些重复工作，后边介绍的方案则不会有这样的问题。
@CrossOrigin 注解可以配置以下属性：
-
origins：允许的域，* 表示所有，一般可以指定具体的域， -
allowedHeaders：允许的请求头字段，* 表示所有 -
exposedHeaders：哪些响应头可以作为响应的一部分暴露出来 -
methods：允许的请求方法（GET、POST...），* 表示所有 -
allowCredentials：是否允许浏览器发送凭证信息，例如 Cookie -
maxAge： 预检请求的有效期，有效期内不用再发出预检请求
addCorsMappings
@Configuration
public class WebMvcConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**") // 可以被跨域请求的接口，/**此时表示所有
.allowedMethods("*")
.allowedOrigins("*")
.allowedHeaders("*")
.allowCredentials(false)
.exposedHeaders("")
.maxAge(3600);
}
}
这种方式和@CrossOrigin方式要配置的属性基本一样，大致原理也类似，都是在DispatcherServlet中触发跨域处理，配置了一个CorsConfiguration对象，然后用该对象创建CorsInterceptor拦截器，然后在拦截器中调用DefaultCorsProcessor#processRequest方法，完成对跨域请求的校验。
CorsFilter
@Configuration
public class CorsFilterConfig {
@Bean
FilterRegistrationBean<CorsFilter> corsFilter() {
FilterRegistrationBean<CorsFilter> registrationBean = new FilterRegistrationBean<>();
CorsConfiguration corsConfiguration = new CorsConfiguration();
corsConfiguration.setAllowedMethods(Collections.singletonList("*"));
corsConfiguration.setAllowedHeaders(Collections.singletonList("*"));
corsConfiguration.setAllowedOrigins(Collections.singletonList("*"));
corsConfiguration.setAllowCredentials(true);
corsConfiguration.setMaxAge(3600L);
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
source.registerCorsConfiguration("/**", corsConfiguration);
CorsFilter filter = new CorsFilter(source);
registrationBean.setFilter(filter);
registrationBean.setOrder(Ordered.HIGHEST_PRECEDENCE);
return registrationBean;
}
}
这里使用的是跨域过滤器，在过滤器的doFilterInternal方法中调用 DefaultCorsProcessor#processRequest方法，完成对跨域请求的校验；核心的配置和前边两种方案类似，这里由CorsConfiguration来完成，由于过滤器的执行时机早于拦截器，所以CorsFilter处理跨域的时机早于@CrossOrigin、addCorsMappings。
Spring Security
项目中如果使用了 Spring Security，则会导致前边介绍的跨域解决方案失效，因为 Spring Security 是基于过滤器的实现的（最终是FilterChainProxy），过滤器会先于拦截器执行，导致复杂请求的预检请求（OPTIONS）被 Spring Security 拦截，所以@CrossOrigin、addCorsMappings会可能失效，有一种方案是放行预检请求，但是放行请求并不安全，所以使用了 Spring Security 后不建议再使用@CrossOrigin、addCorsMappings方案。
同样的原理，如果CorsFilter设置的优先级低于 FilterChainProxy（默认-100） 则CorsFilter方案也会失效，可以提高CorsFilter的优先级（例如 Ordered.HIGHEST_PRECEDENCE），这样使用 Spring Security 就不会有影响了。
其实在 Spring Security 中已经提供了更加优雅的跨域解决方案，不用考虑前边的问题，配置类如下：
@Configuration
public class SecurityConfig extends WebSecurityConfigurerAdapter {
@Override
protected void configure(AuthenticationManagerBuilder auth) throws Exception {
InMemoryUserDetailsManager manager = new InMemoryUserDetailsManager();
manager.createUser(User.withUsername("zhangsan").password("{noop}123456").roles("admin").build());
auth.userDetailsService(manager);
}
@Override
protected void configure(HttpSecurity http) throws Exception {
http.authorizeRequests()
// .antMatchers(HttpMethod.OPTIONS).permitAll() // 放行 @CrossOrigin、addCorsMappings 的预检请求
.anyRequest().authenticated()
.and()
.httpBasic()
.and()
.formLogin()
// .loginPage("/login")
.loginProcessingUrl("/doLogin")
.successHandler((httpServletRequest, httpServletResponse, authentication) -> {
User user = (User) authentication.getPrincipal();
writeMessage(httpServletResponse, new ObjectMapper().writeValueAsString(user));
System.out.println("login success");
})
.failureHandler((httpServletRequest, httpServletResponse, e) -> {
System.out.println("login failure");
})
.permitAll()
.and()
.logout()
.logoutSuccessHandler((httpServletRequest, httpServletResponse, authentication) -> {
System.out.println("logout success");
})
.permitAll()
.and()
.exceptionHandling()
.authenticationEntryPoint((request, response, authException) -> {
response.setStatus(401);
writeMessage(response, "please login");
System.out.println("please login");
})
.and().cors().configurationSource(corsConfigurationSource()) // Spring Security 的跨域配置
.and()
.csrf().disable();
}
CorsConfigurationSource corsConfigurationSource() {
CorsConfiguration corsConfiguration = new CorsConfiguration();
corsConfiguration.setAllowedMethods(Collections.singletonList("*"));
corsConfiguration.setAllowedHeaders(Collections.singletonList("*"));
corsConfiguration.setAllowedOrigins(Collections.singletonList("*"));
corsConfiguration.setAllowCredentials(true);
corsConfiguration.setMaxAge(3600L);
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
source.registerCorsConfiguration("/**", corsConfiguration);
return source;
}
private void writeMessage(HttpServletResponse response, String message) throws IOException {
response.setContentType("application/json;charset=utf-8");
PrintWriter out = response.getWriter();
out.write(message);
out.flush();
out.close();
}
}
内容看着很多，其实和跨域相关的配置只有.and().cors().configurationSource(corsConfigurationSource())，其中corsConfigurationSource()方法的配置和CorsFilter方案中的类似。
源码地址：https://github.com/shehuan/cors
本文完！
