跨域问题的调研记录

问题起因

前端要求给项目配置跨域。

疑惑

1. “跨域”是什么？

2. 怎么处理“跨域”？

调研记录

“跨域”是什么？

前端调用的后端接口不属于同一个域（域名或端口不同），就会产生跨域问题，也就是说你的应用访问了该应用域名或端口之外的域名或端口。

1. 为什么会发生跨域问题？

   须同时满足以下三个条件：

   • 浏览器限制

   • 请求地址的域名或端口和当前访问的域名或端口不一样

   • 发送的是XHR（XMLHttpRequest）请求

怎么解决跨域问题

中间件可以配置跨域，但需要修改中间件的配置。Springboot的跨域主要使用@CrossOrigin来实现。给想跨域的方法加上注释即可，也可以加在Contoller头上：

@CrossOrigin
@RestController
@SpringBootApplication
public class SpringBootCorsTestApplication {
    
}

也可以添加SpringWeb的配置类：

@Configuration
public class WebMvcConfig extends WebMvcConfigurerAdapter {
​
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedMethods("POST", "GET", "PUT", "OPTIONS", "DELETE")
                .maxAge(3600)
                .allowCredentials(true);
    }
}

甚至可以添加过滤器来配置：

@Bean
public FilterRegistrationBean corsFilter() {
    UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
    CorsConfiguration config = new CorsConfiguration();
    config.setAllowCredentials(true);   config.addAllowedOrigin("http://localhost:9000");
    config.addAllowedOrigin("null");
    config.addAllowedHeader("*");
    config.addAllowedMethod("*");
    source.registerCorsConfiguration("/**", config); // CORS 配置对所有接口都有效
    FilterRegistrationBean bean = newFilterRegistrationBean(new CorsFilter(source));
    bean.setOrder(0);
    return bean;
}

参考资料

1. 不要再问我跨域的问题了

2. 一文搞懂跨域的所有问题，生活从此669~

3. SpringBoot配置Cors解决跨域请求问题