React客户端无法携带含JWT的HttpOnly Cookie请求SpringBoot服务

问题回顾 #

SpringBoot服务运行在8081端口，已配置CORS允许http://localhost:3000等源并开启allowCredentials，登录接口返回的Set-Cookie响应头可正常接收，但React客户端（3000端口）用fetch或axios发送请求时，浏览器未携带该Cookie。

可能的问题及解决方案 #

1. Cookie的Domain配置兼容性问题 #

你设置了domain("localhost")，但部分浏览器在跨端口场景下对localhost的Cookie domain处理存在兼容性问题。尝试移除domain配置，让浏览器自动绑定当前请求的主机：

ResponseCookie jwtCookie = ResponseCookie.from("jwt", jwtToken)
        .httpOnly(true)
        .secure(false)
        .path("/")
        // 移除domain配置
        .maxAge(1 * 60 * 60)
        .sameSite("Lax")
        .build();

不指定domain时，Cookie会自动绑定到请求的主机名（不带端口），这样localhost:3000的请求可以正常携带Cookie到localhost:8081。

2. SameSite=None的使用限制 #

若尝试设置sameSite("None")，必须同时将secure设为true——现代浏览器要求SameSite=None的Cookie只能通过HTTPS传输，HTTP环境下设置SameSite=None且secure=false会导致浏览器拒绝存储Cookie。你的场景是HTTP，保持SameSite=Lax即可。

3. 补充CORS的ExposedHeaders配置 #

虽然浏览器默认处理Set-Cookie，但显式暴露该头可避免潜在的跨域限制问题：

configuration.setExposedHeaders(List.of(HttpHeaders.SET_COOKIE));

4. 验证URL与Cookie的匹配性 #

确保客户端请求的URL和Cookie的domain完全匹配：如果客户端曾用http://192.168.1.202:8081请求，而Cookie的domain设为localhost，会导致Cookie无法携带，需统一使用localhost或调整Cookie的domain为对应IP。

5. 检查浏览器隐私设置 #

部分浏览器默认开启"阻止第三方Cookie"，跨端口场景下可能被判定为第三方上下文。尝试关闭该设置后重新测试。

验证步骤 #

1. 登录后，在浏览器开发者工具的Application > Cookies > http://localhost:8081下确认jwt Cookie是否存在；
2. 发送/users/me请求时，查看Network标签的请求头是否包含Cookie: jwt=xxx；
3. 若Cookie不存在，检查浏览器Console标签是否有关于Cookie存储的警告信息。

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