前言

前后端分离目前已是大势所趋，跨域问题的出现也是屡见不鲜。本文将从为什么会出现跨域、什么是跨域以及如何解决跨域三个方面详细说明。

为什么会出现跨域

跨域问题出于浏览器的同源策略限制。同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，即只有协议+主机名+端口号(如存在)相同时，才允许相互访问，也就是说只能访问和操作自己域下的资源，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。

什么是跨域

当请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域。以下为几种常见的跨域示例：

如何解决跨域

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;
            }

}