Spring Boot 跨域解决方案

跨域

前端和后端的跨域问题,主要是由于浏览器同源策略的限制,同源一般指相互请求资源的两个域的协议、域名(主域名以及子域名)和端口号都相同,其中任何一个不相同就会出现跨域请求被限制的问题。

同源策略的限制主要是为了避免浏览器受到 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-OriginAccess-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() {
        FilterRegistrationBean 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处理跨域的时机早于@CrossOriginaddCorsMappings

Spring Security

项目中如果使用了 Spring Security,则会导致前边介绍的跨域解决方案失效,因为 Spring Security 是基于过滤器的实现的(最终是FilterChainProxy),过滤器会先于拦截器执行,导致复杂请求的预检请求(OPTIONS)被 Spring Security 拦截,所以@CrossOriginaddCorsMappings会可能失效,有一种方案是放行预检请求,但是放行请求并不安全,所以使用了 Spring Security 后不建议再使用@CrossOriginaddCorsMappings方案。

同样的原理,如果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

本文完!

你可能感兴趣的:(Spring Boot 跨域解决方案)