前言
前后端分离目前已是大势所趋，跨域问题的出现也是屡见不鲜。本文将从为什么会出现跨域、什么是跨域以及如何解决跨域三个方面详细说明。
为什么会出现跨域
跨域问题出于浏览器的同源策略限制。同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，即只有协议+主机名+端口号(如存在)相同时，才允许相互访问，也就是说只能访问和操作自己域下的资源，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。
什么是跨域
当请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域。以下为几种常见的跨域示例：
| 当前页面URL | 被请求页面URL | 是否跨域 | 说明 |
|---|---|---|---|
| http://www.cors.com/ | http://www.cors.com/index.html | 否 | 同源，协议、域名、端口号均一致 |
| http://www.cors.com/ | https://www.cors.com/index.html | 是 | 协议不同，https和http |
| http://www.cors.com/ | http://www.test.com/ | 是 | 域名不同，cors和test |
| http://www.cors.com/ | http://blog.cors.com/ | 是 | 子域名不同，www和blog |
| http://www.cors.com:8080/ | http://www.cors.com:8081/ | 是 | 端口号不同，8080和8081 |
如何解决跨域
1、添加@CrossOrigin注解
注解@CrossOrigin可以添加在指定接口上，作用范围为当前接口。
@RestController
@RequestMapping("/user")
public class UserController {
@Resource
private UserService userService;
@GetMapping("/getUser/{id}")
@CrossOrigin(origins = "*",maxAge = 3600)
public User getUser(@PathVariable("id") Integer id) {
return userService.getById(id);
}
}
也可以添加在接口类上，作用范围为接口类里的所有接口。
@RestController
@RequestMapping("/user")
@CrossOrigin(origins = "*",maxAge = 3600)
public class UserController {
@resource
private UserService userService;
@GetMapping("/getUser/{id}")
public User getUser(@PathVariable("id") Integer id) {
return userService.getById(id);
}
@GetMapping("/getUserList")
public User getUserList() {
return userService.getUserList();
}
}
2、全局配置
全局配置主要有以下两种种形式。
第一种是继承WebMvcConfigurerAdapter类，并复写addCorsMappings方法。
@Configuration
public class MyWebAppConfigurer extends WebMvcConfigurerAdapter {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("*")
.allowCredentials(true)
.allowedMethods("*")
.maxAge(3600);
}
}
第二种是自定义跨域处理FIlter，并注入到Spring容器中
@Configuration
public class MyCorsConfig {
@Bean
public CorsWebFilter corsWebFilter(){
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
CorsConfiguration corsConfiguration = new CorsConfiguration();
corsConfiguration.addAllowedHeader("*");
corsConfiguration.addAllowedMethod("*");
corsConfiguration.addAllowedOrigin("*");
corsConfiguration.setAllowCredentials(true);
source.registerCorsConfiguration("/**",corsConfiguration);
return new CorsWebFilter(source);
}
}
需特别注意
当项目中存在自定义的Interceptor或者Filter时，就很可能会导致以上的跨域配置不生效。反复检查对比配置并没问题，系统打印的日志也看不出任何猫腻，奇怪得让人怀疑人生。这也是网上许多讲解如何解决跨域的文章存在鸡肋的地方，讲解得并不完整，对于小Demo简单配置下就能生效，但工作中的项目实际上要复杂得多。
假设存在用于token校验的Interceptor，跨域配置如下：
public class TokenInterceptor implements HandlerInterceptor {
@Override
public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
if (handler instanceof ResourceHttpRequestHandler) {
return true;
}
//拦截器可能会拦截到前端的options请求，导致跨域解决不成功，故增加该判断
if ("OPTIONS".equals(request.getMethod().toUpperCase())) {
return true;
}
//此处省略token校验的详细流程
......
//如果token校验失败，需要抛错
//需特别注意，一定要在response中配置跨域Header配置，不然依然会报错跨域异常
if(checkTokenFail){
response.addHeader("Content-Type", "application/json;charset=UTF-8");
response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Methods", "*");
response.setHeader("Access-Control-Max-Age", "3600");
response.setHeader("Access-Control-Allow-Headers", "x-requested-with,content-type");
MyResponse res = new MyResponse ("failed", System.currentTimeMillis(), "用户未登陆");
response.getWriter().write(JSON.toJSONString(res));
return false;
}
}
假设存在用于日志打印的LoggingFilter，跨域配置如下：
public class ReqRespLoggingFilter implements Filter, Ordered {
@Override
public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {
if (LOGGER.isInfoEnabled()) {
this.requestId.set(Long.valueOf(this.id.incrementAndGet()));
RequestWrapper requestWrapper = new RequestWrapper((HttpServletRequest) request);
ResponseWrapper responseWrapper = new ResponseWrapper((HttpServletResponse) response);
//过滤器可能会拦截到前端的options请求，导致跨域解决不成功，故增加该判断
if("OPTIONS".equals(((HttpServletRequest) request).getMethod())) {
chain.doFilter(request, response);
return;
}
}