Spring Security使用中Preflight请求和跨域问题详解

什么是Preflight请求

Preflight请求也被称为CORS预检请求，是跨域请求中的一种。在进行跨域请求时，客户端会自动发送Preflight请求到服务器来检查是否可以跨域请求。具体来说，Preflight请求是一个附带预检请求头信息的OPTIONS请求，用于检查实际请求是否可以被服务器接受。

如何处理Preflight请求和跨域问题

在Spring Security中处理Preflight请求和跨域问题，需要在WebSecurityConfigurerAdapter中添加CorsConfigurationSource配置，并设置相应的跨域参数，如允许的域名、允许的请求方法等。

下面是一个示例：

@Configuration
@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {

    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http.authorizeRequests()
            .anyRequest().authenticated()
            .and()
            .cors().configurationSource(corsConfigurationSource())
            .and()
            .httpBasic();
    }

    @Bean
    CorsConfigurationSource corsConfigurationSource() {
        CorsConfiguration configuration = new CorsConfiguration();
        configuration.setAllowedOrigins(Arrays.asList("*"));
        configuration.setAllowedMethods(Arrays.asList("GET", "POST", "PUT", "DELETE", "OPTIONS"));
        configuration.setAllowedHeaders(Arrays.asList("Content-Type", "Authorization"));
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", configuration);
        return source;
    }
}

在上面的示例中，我们允许所有域名，允许的请求方法包括GET、POST、PUT、DELETE、OPTIONS，允许的请求头包括Content-Type和Authorization，将此配置添加到Spring Security配置中，即可解决跨域问题和Preflight请求问题。

示例1：跨域POST请求

假设我们有一个前端页面，需要向后端发送POST请求，请求参数如下：

const data = {
    username: 'test',
    password: '123456'
}

使用jQuery发送跨域POST请求的示例代码如下：

$.ajax({
    url: 'http://localhost:8080/login',
    type: 'POST',
    crossDomain: true,
    contentType: 'application/json',
    data: JSON.stringify(data),
    success: function (result) {
        console.log(result);
    },
    error: function (xhr, status, error) {
        console.log(xhr.responseText);
    }
});

如果后端没有做跨域配置，会出现以下错误：

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

这是因为浏览器发现请求是跨域请求，会发送Preflight请求来检查是否允许跨域。如果后端没有做跨域配置，Preflight请求会被拒绝，从而导致POST请求失败。

为了解决这个问题，我们可以在后端的Spring Security配置中，添加corsConfigurationSource配置，设置允许的域名、请求方法和请求头，如上述示例所示。

示例2：跨域WebSocket请求

如果我们需要使用WebSocket进行跨域通信，同样需要解决跨域问题和Preflight请求问题。

假设我们有一个WebSocket服务后端，使用Spring Boot和Spring Websocket实现：

@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {

    @Override
    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
        registry.addHandler(myHandler(), "/myHandler")
            .setAllowedOrigins("*");
    }

    @Bean
    public WebSocketHandler myHandler() {
        return new MyHandler();
    }

    private static class MyHandler implements WebSocketHandler {

        @Override
        public void afterConnectionEstablished(WebSocketSession session) throws Exception {
            System.out.println("connection established");
        }

        @Override
        public void handleMessage(WebSocketSession session, WebSocketMessage<?> message) throws Exception {
            System.out.println("message received: " + message);
        }

        @Override
        public void handleTransportError(WebSocketSession session, Throwable exception) throws Exception {
            System.out.println("transport error: " + exception.getMessage());
        }

        @Override
        public void afterConnectionClosed(WebSocketSession session, CloseStatus closeStatus) throws Exception {
            System.out.println("connection closed: " + closeStatus.getReason());
        }

        @Override
        public boolean supportsPartialMessages() {
            return false;
        }
    }
}

这个WebSocket服务的地址是ws://localhost:8080/myHandler，我们可以在前端使用WebSocket对象进行连接：

const socket = new WebSocket('ws://localhost:8080/myHandler');

socket.onopen = function () {
    console.log('connection established');
}

socket.onmessage = function (event) {
    console.log('message received: ' + event.data);
}

socket.onerror = function () {
    console.log('error');
}

socket.onclose = function (event) {
    console.log('connection closed: ' + event.reason);
}

如果后端没有做跨域配置，会出现以下错误：

WebSocket connection to 'ws://localhost:8080/myHandler' failed: Error during WebSocket handshake: Unexpected response code: 403

同样是Preflight请求被拒绝导致连接失败。解决这个问题的方法，同样是在后端的Spring Security配置中添加corsConfigurationSource配置，设置允许的域名、请求方法和请求头。其中，WebSocket的跨域域名需要设置到setAllowedOrigins方法中，如上述示例所示。