跨域问题排查 | 深入分析SpringSecurity前后端分离下的跨域难题

后端

2023-01-27 13:05:06

跨域：前端与后端间的无缝交流

什么是跨域？

在当今互联网世界中，应用程序通常由多个部分组成，每个部分可能由不同的团队或公司开发。这些部分可以通过称为应用程序编程接口 (API) 的机制进行通信。然而，当这些部分托管在不同的域名或协议下时，就会出现跨域问题。

跨域本质上是浏览器安全机制，旨在防止恶意脚本未经用户同意访问不同域名的敏感数据。跨域错误会阻止前端应用程序从后端获取数据，从而导致应用程序无法正常工作。

解决跨域的 4 种方法

解决跨域问题的常见方法有以下四种：

1. 修改后端配置

在后端，我们可以配置服务器以允许来自特定域名的跨域请求。使用 Spring Security 框架时，可以通过配置 CorsConfigurationSource 接口来实现此目的。代码示例如下：

http.cors().configurationSource(new CorsConfigurationSource() {
    @Override
    public CorsConfiguration getCorsConfiguration(HttpServletRequest request) {
        CorsConfiguration config = new CorsConfiguration();
        config.setAllowedOrigins(Arrays.asList("*"));
        config.setAllowedMethods(Arrays.asList("GET", "POST", "PUT", "DELETE", "OPTIONS"));
        config.setAllowedHeaders(Arrays.asList("*"));
        config.setMaxAge(3600);
        return config;
    }
});

2. 设置前端请求头

对于非简单请求（例如涉及自定义 HTTP 方法或标题的请求），前端需要配置允许发送的请求头信息。在请求头中，需要设置以下信息：

Origin: https://example.com
Access-Control-Request-Method: GET
Access-Control-Request-Headers: Content-Type

3. 修改 Spring Security 中的过滤器

Spring Security 中有一个名为 CorsFilter 的过滤器，可以处理跨域请求。通过在 Spring Security 的过滤器链中添加此过滤器，我们可以确保它可以处理跨域请求。代码示例如下：

public class WebSecurityConfig extends WebSecurityConfigurerAdapter {

    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http.addFilterAfter(new CorsFilter(), SecurityContextPersistenceFilter.class);
    }
}

4. 配置前端跨域请求

前端请求后端时，需要先发送一个 OPTIONS 请求，后端返回响应后，前端再发送正式请求。代码示例如下：

fetch(url, {
    method: 'OPTIONS',
    headers: {
        'Access-Control-Request-Method': 'GET',
        'Access-Control-Request-Headers': 'Content-Type'
    }
}).then(res => {
    fetch(url, {
        method: 'GET',
        headers: {
            'Content-Type': 'application/json'
        }
    })
})