学习笔记 ----- SpringBoot，Vue 前后端分离的 CORS 跨域请求处理

学习笔记 ----- SpringBoot，Vue 前后端分离的 CORS 跨域请求处理 学习笔记 ----- SpringBoot，Vue 前后端分离的 CORS 跨域请求处理 前端部分 vue

在 vue 项目中的 config 目录下的 index.js 设置 proxyTable 属性（首先保证已经有了 axios 依赖，能够发送请求，这里的配置不再说明）：

proxyTable: {
  '/api': {
    target: '请求域名',
    changeOrigin: true,
    pathRewrite: {
      '^/api': ''
    }
  }

后端部分 SpringBoot SpringBoot 后端处理跨域请求有四种方式：

• 通过注解 @CrossOrigin
• 通过实现类 WebMvcConfigurer
• 通过注册 CorsFilter
• 通过 SpringSecurity 处理跨域请求

方式一：通过注解

以下提供一个简单的用法，@CrossOrigin 注解中还能配置一些参数，这里不做说明

@RestController
// 接受一切跨域请求
@CrossOrigin("*")
public class TestController {

    @PostMapping("/hello")
    public String hello() {
        return "nihao";
    }
}

方式二：通过实现类 WebMvcConfigurer

@Configuration
public class CorsConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
                 // 支持所有接口
        registry.addMapping("/**")
                 // 支持所有请求类型
                .allowedMethods("*")
                 // 支持一切域名的跨域请求
                .allowedOrigins("*")
                 // 支持所有请求头
                .allowedHeaders("*")
                 // 禁止 cookie
                .allowCredentials(false)
                 // 不暴露响应头
                .exposedHeaders("")
                 // 设置请求的最长有效时间
                .maxAge(3600);
    }
}

方式三：通过注册 CorsFilter

这个方式就是自己实现配置一个跨域请求的处理过滤器，然后将其交给 SpringBoot 使用

@Configuration
public class CorsConfig {

    @Bean
    FilterRegistrationBean corsFilter() {
        FilterRegistrationBean registrationBean = new FilterRegistrationBean<>();

        CorsConfiguration corsConfiguration = new CorsConfiguration();
        // 这些配置和以上的配置意义是相同的
        corsConfiguration.setAllowedHeaders(Arrays.asList("*"));
        corsConfiguration.setAllowedMethods(Arrays.asList("*"));
        corsConfiguration.setAllowedOrigins(Arrays.asList("*"));
        corsConfiguration.setMaxAge(3600L);

        UrlbasedCorsConfigurationSource urlbasedCorsConfigurationSource = new UrlbasedCorsConfigurationSource();
        urlbasedCorsConfigurationSource.registerCorsConfiguration("/**", corsConfiguration);

        registrationBean.setFilter(new CorsFilter(urlbasedCorsConfigurationSource));
        // 设置这个跨域过滤器的优先级，确保其能在 SpringSecurity 的过滤器之前发挥作用
        registrationBean.setOrder(Ordered.HIGHEST_PRECEDENCE);

        return registrationBean;
    }
}

方式四：通过 SpringSecurity 处理跨域请求

注意，方式一和方式二在引入 springsecurity 之后均不会生效。原因是这两个处理方式均会在 springsecurity 的过滤器链之后执行，而 springsecurity 在请求中不带认证信息就可能会被拦截，请求就不会到达后续的跨域处理流程，具体原因可以去看 江南一点雨 的相关文章或者书籍

理论上第三种方式也可以用于 SpringSecurity 的跨域请求，但事实上笔者尽管将过滤器的优先级调到最高，但依旧会有跨域问题，但是用这个方式就不会有问题了，于是还是建议在要使用 SpringSecurity 的情况下，使用这一种方式

@Configuration
public class SecurityConfig extends WebSecurityConfigurerAdapter {

    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http.authorizeRequests()
                .anyRequest().authenticated()
                .and()
                .httpBasic()
                .and()
                // 下面两行就是关键部分，即配置 cors 请求
                .cors()
                .configurationSource(configurationSource())
                .and()
                .csrf().disable();
    }

    CorsConfigurationSource configurationSource() {
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.setAllowedHeaders(Arrays.asList("*"));
        corsConfiguration.setAllowedMethods(Arrays.asList("*"));
        corsConfiguration.setAllowedOrigins(Arrays.asList("*"));
        corsConfiguration.setMaxAge(3600L);

        UrlbasedCorsConfigurationSource urlbasedCorsConfigurationSource = new UrlbasedCorsConfigurationSource();
        urlbasedCorsConfigurationSource.registerCorsConfiguration("/**", corsConfiguration);

        return urlbasedCorsConfigurationSource;
    }
}