Spring Boot与前端跨域Cookie不保存致会话失效的解决方案咨询

后端Spring Boot配置调整 #

1. 修正CORS配置 #

跨域带凭证的请求不允许使用通配符*作为允许源，必须明确指定前端地址，同时开启允许凭证：

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("http://localhost:5500") // 精确匹配前端地址
                .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
                .allowedHeaders("*")
                .allowCredentials(true) // 核心：允许跨域携带凭证
                .maxAge(3600);
    }
}

2. Spring Security会话与Cookie配置 #

需要确保Security启用CORS，并调整Cookie属性适配跨域场景：

@Configuration
@EnableWebSecurity
public class SecurityConfig {

    @Bean
    public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {
        http
                .cors(Customizer.withDefaults()) // 关联上面的CORS配置
                .csrf(csrf -> csrf.disable()) // 开发环境临时禁用，生产需配置CSRF令牌
                .authorizeHttpRequests(auth -> auth
                        .requestMatchers("/login").permitAll()
                        .anyRequest().authenticated()
                )
                .formLogin(form -> form
                        .loginProcessingUrl("/login")
                        .successHandler((request, response, authentication) -> {
                            response.setStatus(HttpStatus.OK.value());
                            response.setHeader("Access-Control-Allow-Credentials", "true");
                            response.setHeader("Access-Control-Allow-Origin", "http://localhost:5500");
                        })
                )
                .sessionManagement(session -> session
                        .sessionCreationPolicy(SessionCreationPolicy.IF_REQUIRED) // 保留会话创建逻辑
                );

        return http.build();
    }

    // 配置跨域Cookie属性
    @Bean
    public CookieSerializer cookieSerializer() {
        DefaultCookieSerializer serializer = new DefaultCookieSerializer();
        serializer.setDomainName("localhost");
        serializer.setCookiePath("/");
        serializer.setSameSite("None"); // 跨域必须设为None
        serializer.setUseSecureCookie(false); // 本地HTTP开发设为false，生产HTTPS环境改为true
        return serializer;
    }
}

前端Fetch请求调整 #

所有跨域请求必须显式设置credentials: 'include'，否则浏览器不会保存/携带Cookie：

// 登录请求示例
fetch('http://localhost:8080/login', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
    },
    body: 'username=你的用户名&password=你的密码',
    credentials: 'include' // 核心：开启凭证携带
})
.then(response => {
    console.log('登录成功');
    // 后续受保护接口请求同样需要带credentials
    return fetch('http://localhost:8080/save', {
        method: 'POST',
        credentials: 'include'
    });
})
.then(res => res.json())
.then(data => console.log('接口响应:', data))
.catch(err => console.error('请求失败:', err));

排查要点 #

• 检查浏览器Network面板：登录请求的Response Headers必须包含Set-Cookie、Access-Control-Allow-Credentials: true、Access-Control-Allow-Origin: http://localhost:5500
• 确保前端请求的Origin与后端allowedOrigins完全一致（协议、域名、端口都不能错）
• 本地HTTP环境下，部分浏览器（如Chrome）对SameSite=None的Cookie有限制，可临时在浏览器设置中允许不安全的Cookie（仅开发用）

内容的提问来源于stack exchange，提问作者helloApp