Springboot 开发 -- 跨域问题技术详解

一、跨域的概念

跨域访问问题指的是在客户端浏览器中，由于安全策略的限制，不允许从一个源（域名、协议、端口）直接访问另一个源的资源。当浏览器发起一个跨域请求时，会被浏览器拦截，并阻止数据的传输。

这种限制是为了保护用户的隐私和安全，防止恶意网站利用用户的浏览器向其他网站发送请求并获取敏感信息。

以下是跨域的一些常见场景：

• 不同域名：当页面的域名与请求的资源的域名不一致时，会触发跨域问题。例如，页面的域名为http://a.com，而请求的资源的域名为http://b.com。
• 不同协议：当请求的资源的协议与页面的协议不一致时，也会引发跨域问题。例如，页面使用https://a.com访问资源http://a.com。
• 不同端口：如果请求的资源的端口与页面的端口不同，同样会导致跨域问题。例如，页面使用http://a.com:8080请求资源http://a.com:8090。

二、跨域问题解决方案

Spring Boot提供了几种配置CORS策略的方法，下面我们将逐一介绍：

方法一：使用 @CrossOrigin 注解

1. 对于单个Controller或方法，可以使用@CrossOrigin注解来允许跨域请求。例如：

@RestController  
@RequestMapping("/api")  
@CrossOrigin(origins = "http://localhost:8080", maxAge = 3600)  
public class MyApiController {  
  
    // ... 方法定义  
}

或者，你也可以在方法级别使用@CrossOrigin注解：

@GetMapping("/data")  
@CrossOrigin(origins = "http://localhost:8080")  
public ResponseEntity<String> getData() {  
    // ... 方法实现  
}

方法二： 全局配置 CORS

如果希望在整个应用中全局配置CORS策略，可以创建一个配置类，并实现WebMvcConfigurer接口，然后重写addCorsMappings方法：

@Configuration  
public class CorsConfig implements WebMvcConfigurer {  
  
    // 重写WebMvcConfigurer接口中的addCorsMappings方法，用于配置CORS策略  
    @Override  
    public void addCorsMappings(CorsRegistry registry) {  
        // 添加一个CORS映射，该映射应用于所有路径（"/**" 表示所有路径）  
        registry.addMapping("/**")  
  
                // 允许来自以下来源的请求（多个来源以逗号分隔）  
                .allowedOrigins("http://localhost:8080", "http://example.com")  
  
                // 允许使用以下HTTP方法（多个方法以逗号分隔）  
                .allowedMethods("GET", "POST", "PUT", "DELETE")  
  
                // 允许携带以下请求头（'*' 表示允许所有请求头）  
                .allowedHeaders("*")  
                
				// 是否允许携带用户凭据（如 cookies、HTTP 认证及客户端 SSL 证明等）
				.allowCredentials(false)
  
                // 预检请求的缓存时间（以秒为单位），浏览器将在这个时间内缓存预检请求的响应  
                .maxAge(3600);  
    }  
}

• 当跨域请求需要携带用户凭据时，服务器必须在响应头中设置 Access-Control-Allow-Credentials 为true。
• 当 Access-Control-Allow-Origin 的值设置为 * 时（即允许所有来源的跨域请求），allowCredentials 不能设置为 true。因为出于安全考虑，浏览器不允许携带凭据的跨域请求被发送到通配符源。

在上面的例子中，我们允许了所有路径（/**）来自http://localhost:8080和http://example.com的跨域请求，并指定了允许的HTTP方法和请求头。

方法三：使用 Filter 过滤器配置

@Configuration
public class CorsFilter implements Filter {  
  
    @Override  
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain)  
            throws IOException, ServletException {  
        HttpServletResponse response = (HttpServletResponse) res;  
        response.setHeader("Access-Control-Allow-Origin", "*");  
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");  
        response.setHeader("Access-Control-Max-Age", "3600");  
        response.setHeader("Access-Control-Allow-Headers", "x-requested-with");  
        chain.doFilter(req, res);  
    }  
  
    // ... 其他方法实现  
    @Override
    public void destroy() {
    }
    @Override
    public void init(FilterConfig filterConfig) throws ServletException {
    }
}

利用过滤器配置实现跨域,还有另外一种方法：

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

}