SpringBoot配置cors实现跨域

一、关键词

同源策略(same origin policy)：是浏览器的一个安全功能，不同源的客户端脚本在没有明确授权的情况下，不能读写对方资源

源：协议+域名+端口号

同源：协议、域名、端口号均相同

URL	说明	允许通信
`http://www.a.com/a.js` `http://www.a.com/b.js`	同源	允许
`http://www.a.com:8080/a.js` `http://www.a.com:80/a.js`	同协议、域名，不同端口	不允许
`http://www.a.com/a.js` `https://www.a.com/a.js`	同域名、端口，不同协议	不允许
`http://12.12.12.12/a.js` `http://www.a.com/a.js`	同协议、端口，域名与域名对应ip	不允许
`http:/www.b.com/a.js` `http://www.a.com/a.js`	同协议、端口，不同域	不允许
`http://www.a.com/a.js` `http://script.a.com/a.js`	主域相同，子域不同	不允许

跨域：

1. 非同源资源可以引入，但js不能读写加载的内容。如：嵌入到页面的

<script scr=”…”></script>,<img />,<link />,<iframe />

2. 非同源的网站之间不能发送AJAX请求，需要跨域

CORS(Cross Origin Resource Sharing)：基于W3C规范，允许灵活的指定被授权的跨域请求

简单请求：满足以下两个条件

1. 请求方法：HEAD、GET、POST之一

2. HTTP的头信息不超出以下几种字段：

 - Accept
 - Accept-Language
 - Content-Language
 - Last-Event-ID
 - Content-Type只限于[ application/x-www-form-urlencoded 、multipart/form-data、text/plain]

复杂请求：非简单请求，实际上浏览器将发送两个请求。先发送的是一种"预请求(OPTION)"，此时作为服务端，也需要返回"预回应"作为响应。预请求实际上是对服务端的一种权限请求，只有当预请求成功返回，实际请求才开始执行。

CORS解决简单请求策略：在请求头中增加一个Origin字段，服务器收到请求后，根据该字段是否允许该请求访问。

1. 允许，则在HTTP响应头中添加

Access-Control-Allow-Credentials:true
Access-Control-Allow-Origin:http://localhost:9090
Access-Control-Expose-Headers:X-Token

请求成功

2. 不允许，则不添加，响应失败，报跨域错误

请求失败

CORS解决复杂请求策略：

1. 预检请求将真实请求的信息，包括请求方法、自定义头字段、源信息添加到 HTTP 头信息字段中，询问服务器是否允许这样的操作。服务器接收到预请求时，对Origin、Access-Control-Request-Method、Access-Control-Request-Headers 进行验证，验证通过后，会在返回HTTP头信息中添加：

Access-Control-Allow-Credentials:true
Access-Control-Allow-Methods:POST,GET,PUT,OPTIONS,DELETE
Access-Control-Allow-Origin:http://localhost:9090
Access-Control-Max-Age:30000
Access-Control-Expose-Headers:X-Token

OPTIONS请求

2. 预请求返回成功，执行实际请求

实际请求

二、SpringBoot整合CORS Filter配置跨域(不推荐)

1. 添加依赖

<dependency>
    <groupId>com.thetransactioncompany</groupId>
    <artifactId>cors-filter</artifactId>
    <version>2.5</version>
</dependency>

2. 注册过滤器

@Component
public class MyCorsFilter extends CORSFilter {

    public void init(FilterConfig filterConfig) {
        Properties props = new Properties();
        CORSConfiguration config = null;
        try {
            InputStream resourceAsStream = this.getClass().getClassLoader().getResourceAsStream("cors.properties");
            props.load(resourceAsStream);
            config = new CORSConfiguration(props);
        } catch (CORSConfigurationException e) {
            e.printStackTrace();
        } catch (IOException e) {
            e.printStackTrace();
        }
        this.setConfiguration(config);
    }

    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {
        // 开启cors过滤 ,默认开启
        if (this.getConfiguration().allowGenericHttpRequests) {
            super.doFilter(request, response, chain);
        }else{
            // 未开启cors过滤
            chain.doFilter(request, response);
        }
    }
}

3.项目根目录下添加配置文件(cors.properties)

文件常用配置：
# 开启过滤
cors.allowGenericHttpRequests = true
# 过滤路径
cors.allowOrigin = http://localhost:9090
# 允许cookie
cors.supportsCredentials = true
# 允许方法
cors.supportedMethods = GET, POST, HEAD, PUT, DELETE
# 允许请求头
cors.supportedHeaders = *
# response显示请求头
#cors.exposedHeaders

详细配置请参考：CORS Filter

三、SpringBoot使用自带的配置跨域(Spring Framework 4.2版本以上)(推荐)

1.Filter实现

@Configuration
public class WebConfig extends WebMvcConfigurerAdapter {

    /**
     * 基于Filter的全局配置
     * @return
     */
    @Bean
    public FilterRegistrationBean corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration config = new CorsConfiguration();
        config.setAllowCredentials(false);
        config.addAllowedOrigin("http://localhost:9090");
        config.addAllowedHeader("*");
        config.addAllowedMethod("*");
        source.registerCorsConfiguration("/**", config);
        FilterRegistrationBean bean = new FilterRegistrationBean(new CorsFilter(source));
        bean.setOrder(0);
        return bean;
    }
}

2.Servlet实现(实现粒度控制)

2.1.全局配置

2.1.1静态配置

@Configuration
public class WebConfig extends WebMvcConfigurerAdapter {

    /**
     * 基于Servlet的全局配置
     * @param registry
     */
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
            .allowedOrigins("*")
            .allowedMethods("POST","GET","PUT","DELETE")
            .maxAge(1800)
            .allowCredentials(true)
            .allowedHeaders("*")
            .exposedHeaders("L-TOKEN");
    }
}

2.1.2配置文件配置

配置实体类

   @Component
public class CorsConfigBean {    @Value("${mycors.allowGenericHttpRequests:false}")
    private Boolean allowGenericHttpRequests;    @Value("${mycors.allowedOrigins:NULL}")
    private List<String> allowedOrigins;   @Value("${mycors.allowedMethods:POST,GET,PUT,OPTIONS,DELETE}")
    private List<String> allowedMethods;
    @Value("${mycors.maxAge:30000}")
    private Long maxAge;
@Value("${mycors.allowCredentials:false}")
    private boolean allowCredentials; 
    @Value("${mycors.allowedHeaders:}")
    private List<String> allowedHeaders;
    @Value("${mycors.exposedHeaders:}")
    private List<String> exposedHeaders;
    // getters/setters
}

配置文件(application.properties中配置)

# 开启跨域
mycors.allowGenericHttpRequests = true
# 过滤路径
mycors.allowedOrigins = http://localhost:9090
# 允许cookie
mycors.allowCredentials = false
# 预请求缓存时间
# mycors.maxAge = 1800
# 允许方法
# mycors.allowedMethods = GET,POST
# 允许请求头
mycors.allowedHeaders = *
# response显示请求头
mycors.exposedHeaders = X-Token

配置类

@Configuration
public class WebConfig extends WebMvcConfigurerAdapter {

    @Autowired
    private CorsConfigBean corsConfigBean;

    /**
     * 基于Servlet的全局配置
     * @param registry
     */
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        // 开启跨域
        if (corsConfigBean.getAllowGenericHttpRequests()) {
            registry.addMapping("/**")
                    .allowedOrigins(corsConfigBean.getAllowedOrigins().toArray(new String[]{}))
                    .allowedMethods(corsConfigBean.getAllowedMethods().toArray(new String[]{}))
                    .maxAge(corsConfigBean.getMaxAge())
                    .allowCredentials(corsConfigBean.isAllowCredentials())
                    .allowedHeaders(corsConfigBean.getAllowedHeaders().toArray(new String[]{}))
                    .exposedHeaders(corsConfigBean.getExposedHeaders().toArray(new String[]{}));
        }else{
            super.addCorsMappings(registry);
        }
    }
}

2.2.类配置

@RestController
@CrossOrigin(origins = {"http://localhost:9090"}) // 基于类的跨域控制
public class TestCorsController {

    @GetMapping("/testCors") 
    public String corsTest() {
        return "测试CORS简单请求跨域方法";
    }
}

2.3.方法配置

@RestController
public class TestCorsController {

    @GetMapping("/testCors")
    @CrossOrigin(origins = {"null", "http://localhost:9090"}, allowCredentials = "true")  // 基于方法的跨域控制
    public String corsTest() {
        return "测试CORS简单请求跨域方法";
    }
}

四、总结

1.全局配置

可以使用Filter来进行统一配置

2. 粒度控制

使用Servlet配置，就近原则
全局配置 < 类配置 < 方法配置

3. 原理

3.1请求头

请求头中添加

Origin

3.2响应头

响应头中添加：

Access-Control-Allow-Credentials
Access-Control-Allow-Origin
Access-Control-Expose-Headers:X-Token
Access-Control-Allow-Headers
Access-Control-Allow-Methods
Access-Control-Max-Age
通过HTTP的Headers来判定跨域请求