SpringBoot——解决跨域问题

1. 跨域

1.1 同源策略

跨域问题是由于浏览器的同源策略（Same-Origin Policy）引起的。同源策略是一种安全机制，限制了一个源（包括协议、域名和端口）下的文档或脚本如何与不同源的资源进行交互。

1.2 跨域问题

当一个域名向另一个域名发送数据请求，就是跨域，此时根据同源策略，会产生跨域问题，因跨域产生控制台报错一般都是统一的

如下图示，我故意写了一个跨域错误(产生以下报错就是跨域问题):

2. 跨域解决方案

2.1 通过注解解决跨域

添加注解@CrosOrigin用来解决跨域问题

• 添加到Controller类上，代表这个类中的所有方法都可以跨域
• 添加在方法上，代表这个方法可以进行跨域

对于前端我们自定义的请求头，我们需要自行设置跨域配置，此时，@CorsOrign可能不能允许我们的自定义请求头跨域请求数据，这个时候我们就可以用到第二个解决跨域的方法

2.2 通过CorsFilter解决跨域

这是根据servlet提供的的CorsFilter类自行所写的一个corsFilter()过滤器

步骤：

1. 这也是一个配置类，我们需要加上@Configuration
2. 需要在我们过滤器上加上@Bean注解，需要将其注入到IOC容器中，交给Spring进行管理
3. 在过滤器中中设置规则

代码如下：

@Configuration
public class CorsConfig {


    /**
     * 对于前端我们自定义的请求头，我们需要自行设置跨域配置
     * 此时，@CorsOrign可能不能允许我们的自定义请求头跨域请求数据
     * @return
     */

    @Bean
    public CorsFilter corsFilter(){
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedHeader("*"); //设置访问源地址
        corsConfiguration.addAllowedOrigin("*"); //设置访问源请求头
        corsConfiguration.addAllowedMethod("*"); //设置访问源请求方法
        source.registerCorsConfiguration("/**",corsConfiguration); //对接口配置跨域设置
        return new CorsFilter(source);
    }
}

CorsFilter将会在每个请求到达服务器之前进行拦截和处理，添加CORS相关的响应头部信息，从而解决跨域问题。

2.3 通过配置 CORS 解决跨域

这个跨域解决方案也是当今开发者使用的最主流的的一种方案

这个方案是我们需要写一个配置类，去继承WebMvcConfigurer中的addCorsMappings方法，再而有我们自己设定一些规则的方案

@Configuration
public class WebConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**") // 所有接口
                .allowCredentials(true) // 是否发送 Cookie
                .allowedOriginPatterns("*") // 支持域
                .allowedMethods("GET", "POST", "PUT", "DELETE") // 支持方法
                .allowedHeaders("*")
                .exposedHeaders("*");
    }
}

2.4 结尾

对于这几种解决跨域方案的本人想法是，如果是只是写个测试什么的，可以使用第一种方案，如果是写一个较为复杂的项目，尽量不要去使用第一种方案，很容易就会出错，比如说，我们需要在请求头上设置token，这个时候，就不能使用第一种方案了