Spring Boot+Next.js生产环境Cookie与CSRF配置问题求助

一、后端Spring Boot关键配置调整 #

1. Cookie域名与SameSite核心配置 #

必须将认证Cookie的域名设置为顶级域名.example.com，确保主域example.com和子域api.example.com都能读取。同时生产环境需开启Secure（强制HTTPS传输）、设置SameSite=None（跨域场景下允许Cookie携带），并区分JSESSIONID和XSRF-TOKEN的HttpOnly属性：

@Bean
public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {
    http
        .sessionManagement(session -> session
            .sessionCreationPolicy(SessionCreationPolicy.IF_REQUIRED)
            .sessionFixation().migrateSession()
        )
        .oauth2Login(oauth2 -> oauth2
            .successHandler(customAuthenticationSuccessHandler())
        )
        .csrf(csrf -> csrf
            .csrfTokenRepository(CookieCsrfTokenRepository.withHttpOnlyFalse()) // XSRF-TOKEN需关闭HttpOnly
            .csrfTokenRequestHandler(new CsrfTokenRequestAttributeHandler())
        )
        .logout(logout -> logout
            .logoutSuccessUrl("https://example.com/logout-success")
            .deleteCookies("JSESSIONID", "XSRF-TOKEN")
        );

    // 全局Cookie自定义配置
    http.getSharedObject(CookieCustomizer.class)
        .customize(cookie -> {
            cookie.domain(".example.com");
            cookie.sameSite("None");
            cookie.secure(true);
            // 对JSESSIONID单独开启HttpOnly（安全最佳实践）
            if ("JSESSIONID".equals(cookie.getName())) {
                cookie.httpOnly(true);
            }
        });

    return http.build();
}

2. CORS配置强化 #

明确允许主域https://example.com的请求，且必须开启allowCredentials=true以允许携带Cookie：

@Bean
public CorsConfigurationSource corsConfigurationSource() {
    CorsConfiguration config = new CorsConfiguration();
    config.setAllowedOrigins(List.of("https://example.com"));
    config.setAllowedMethods(List.of("GET", "POST", "PUT", "DELETE", "OPTIONS"));
    config.setAllowedHeaders(List.of("*"));
    config.setAllowCredentials(true);
    config.setMaxAge(3600L);

    UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
    source.registerCorsConfiguration("/**", config);
    return source;
}

在SecurityFilterChain中启用CORS：

http.cors(cors -> cors.configurationSource(corsConfigurationSource()))

3. OAuth2登录成功处理器修正 #

确保重定向回前端受保护页面时，Cookie已完成设置：

@Component
public class CustomAuthenticationSuccessHandler implements AuthenticationSuccessHandler {
    @Override
    public void onAuthenticationSuccess(HttpServletRequest request, HttpServletResponse response, Authentication authentication) throws IOException {
        response.sendRedirect("https://example.com/dashboard"); // 替换为你的受保护页面路径
    }
}

二、前端Next.js配置调整 #

1. Fetch请求强制携带凭证 #

无论服务端组件还是客户端组件，请求后端时必须设置credentials: 'include'，同时携带X-XSRF-TOKEN请求头：

// 服务端组件/API路由示例
import { cookies } from 'next/headers';

async function fetchProtectedData() {
  const xsrfToken = cookies().get('XSRF-TOKEN')?.value || '';
  const res = await fetch('https://api.example.com/api/protected', {
    credentials: 'include',
    headers: {
      'X-XSRF-TOKEN': xsrfToken
    }
  });
  return res.json();
}

// 客户端组件示例
async function fetchProtectedData() {
  const xsrfToken = document.cookie.split('; ')
    .find(row => row.startsWith('XSRF-TOKEN='))?.split('=')[1] || '';
  const res = await fetch('https://api.example.com/api/protected', {
    credentials: 'include',
    headers: {
      'X-XSRF-TOKEN': xsrfToken
    }
  });
  return res.json();
}

2. Next.js重写配置（可选优化） #

在next.config.js中配置重写，将前端/api/*路径代理到后端，简化跨域请求：

/** @type {import('next').NextConfig} */
const nextConfig = {
  async rewrites() {
    return [
      {
        source: '/api/:path*',
        destination: 'https://api.example.com/api/:path*'
      }
    ];
  },
  experimental: {
    trustHost: true
  }
};

module.exports = nextConfig;

之后前端可直接请求/api/protected，无需拼接完整域名。

三、避坑提示 #

• 禁止关闭CSRF/CORS防护：通过上述配置完全可以合规实现跨域认证，关闭防护会引入安全风险。
• 无需迁移逻辑到Next.js服务端：跨子域Cookie配置正确后，现有前后端分离架构可正常运行。

四、验证步骤 #

1. 登录完成后，在浏览器开发者工具的Application -> Cookies中检查：
   • JSESSIONID和XSRF-TOKEN的域名是否为.example.com
   • Secure属性是否为true，SameSite是否为None
2. 查看前端请求头，确认Cookie和X-XSRF-TOKEN已携带
3. 检查后端日志，确认受保护接口请求已正确识别认证会话，未触发登录重定向

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