Spring Boot之跨域

Access to XMLHttpRequest at 'http://localhost:8181/list' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

引言

随着前后端分离架构的流行，Web应用中的跨域问题变得愈发突出。Spring Boot作为一款强大的Java后端框架，如何处理跨域请求成为了开发者关注的焦点。本文将深入研究Spring Boot中的跨域技术，为读者提供全面的解决方案和最佳实践。

同源策略

协议、域名、端口 3 个都相同就是同源

了解跨域

跨域是指在Web开发中，一个域（域名、协议、端口）下的文档或脚本试图请求另一个域下的资源。由于浏览器的同源策略，这种请求可能会受到限制，因此需要采取特定的技术手段来解决。

Spring Boot的跨域解决三种方案

CORS（跨域资源共享）
Spring Boot通过支持CORS来处理跨域请求。通过在Controller中添加@CrossOrigin注解，或者在配置类中配置CorsRegistry，可以实现对跨域请求的控制。CORS提供了细粒度的配置选项，使得开发者能够根据具体需求进行定制。

@RestController
@CrossOrigin(origins = "http://localhost:8080")
public class MyController {
    // Controller代码
}

通过配置类
实现 WebMvcConfigurer 接口，重写 addCorsMappings 方法

@Configuration
public class CorsConfiguration implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOriginPatterns("*")
                .allowedMethods("GET","POST","PUT","DELETE","HEAD","OPTIONS")
                .allowCredentials(true)
                .maxAge(3600)
                .allowedHeaders("*");
    }
}

通过Filter
添加 CORS 过滤器

@Configuration
public class CorsConfig {
    
    @Bean
    public CorsFilter corsFilter(){
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedOrigin("*");
        corsConfiguration.addAllowedHeader("*");
        corsConfiguration.addAllowedMethod("*");
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", corsConfiguration);
        return new CorsFilter(source);
    }
    
}

最佳实践与注意事项

• 安全性考虑： 在允许跨域请求时，务必考虑安全性。限制允许访问的域、方法等，避免滥用。
• 使用代理： 在开发环境中，可以考虑使用代理服务器来避免跨域问题。Webpack等工具提供了相应的代理配置选项。
• 全局配置： 如果项目中的所有接口都需要支持跨域，可以在全局配置中统一设置跨域规则，提高开发效率。

结语
通过本文的探讨，我们了解了Spring Boot中处理跨域请求的主要方法，包括CORS和Filter等。在实际应用中，根据项目的需求选择合适的方式，并注意安全性和最佳实践，将有助于构建安全、灵活的Web应用。跨域问题不再是难题，而成为我们构建现代Web应用的一部分。