React fetch POST无法保留Spring Boot会话的CORS问题排查

核心问题 #

跨域场景下（本地React前端http://localhost:3000 → VPS上的Spring Boot后端），浏览器未自动携带JSESSIONID Cookie，导致后端每次请求都创建新会话，@SessionScope的SessionTokenWrapper无法复用，自定义令牌验证失败。

关键修复步骤 #

1. 调整Spring Boot会话Cookie属性 #

默认会话Cookie的SameSite=Lax规则会阻止跨域请求携带Cookie，需修改为SameSite=None，同时根据环境配置Secure属性：

# application.properties
server.servlet.session.cookie.same-site=None
server.servlet.session.cookie.secure=false # 本地HTTP测试用，生产环境必须改为true（需HTTPS）

2. 优化CORS配置 #

当allowCredentials=true时，allowedOrigins不能使用*，必须指定具体前端源，同时简化请求头配置：

@Configuration
@EnableWebMvc
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("http://localhost:3000", "http://你的公网IP:3000") // 替换为实际前端地址
                .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
                .allowedHeaders("*")
                .exposedHeaders("CustomAuth")
                .allowCredentials(true)
                .maxAge(3600); // 缓存预检请求，减少OPTIONS请求次数
    }
}

3. 确认前端请求配置 #

确保所有跨域请求都设置credentials: 'include'，你的代码已正确配置，但需注意：

• 前后端域名/IP不同时，必须保持该配置，浏览器才会携带Cookie

4. 验证会话绑定逻辑 #

在接口中打印会话ID，确认前后请求是否复用同一会话：

// 在login接口添加
System.out.println("Login Session ID: " + session.getId());
// 在months接口添加
System.out.println("Months Session ID: " + session.getId());

如果两个ID不一致，说明会话未保持，需检查Cookie是否被浏览器正确存储和携带。

调试技巧 #

1. 浏览器开发者工具→Application标签：查看Cookies下是否存在JSESSIONID，检查其Domain、SameSite属性是否正确
2. Network标签：查看请求头是否包含Cookie: JSESSIONID=xxx，响应头是否包含Set-Cookie: JSESSIONID=xxx; SameSite=None; ...
3. Postman测试：手动添加Cookie头携带JSESSIONID，验证后端会话逻辑是否正常

本地运行正常的原因 #

本地前后端均为localhost，属于浏览器同源策略中的"同站点"范畴，SameSite=Lax规则允许携带Cookie，因此会话可以正常保持。

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