Spring服务无法给React前端设置Cookie问题求助

我已经尝试了论坛上几乎所有相关解决方案，耗费多日仍未解决，希望得到帮助。

环境与配置 #

• Spring服务运行在localhost:8080，React前端在localhost:3000
• Spring控制器跨域注解：

@CrossOrigin(origins = "http://localhost:3000", allowCredentials = "true")

• 控制器返回Set-Cookie的代码：

return ResponseEntity.ok()
                .header(HttpHeaders.SET_COOKIE, my_cookie)
                ...

• Cookie构建逻辑：

ResponseCookie.from("cookie_name", value)
                .path("/")
                .httpOnly(true)
                .secure(false)
                .domain("localhost")
                .build()
                .toString();

• 已尝试的参数组合：
  • secure设为false/true（本地HTTP测试用false）
  • domain尝试过localhost、localhost.org、localhost.test、my.localhost.org及不设置
  • sameSite尝试过strict、none、lax并与其他参数组合

问题现象 #

• React登录请求代码：

async function login(email, password) {
    await fetch("http://localhost:8080/auth/login", {
      method: "POST",
      body: JSON.stringify({
        email: email,
        password: password,
      }),
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json",
      },
    })
      .then((response) => {
        return response.json();
      })
      .then((json) => {
        if (json.error) {
          const error = json.error;
          setShowError(true);
          setError(errorMap.get(error));
          return;
        }
        const token = json.payload.token;
        const refreshToken = json.payload.refreshToken;
        const name = json.payload.name;
        setCookie("token", token);
        setCookie("refreshToken", refreshToken);
        setCookie("name", name);
      })
      .catch(() => {
        setShowError(true);
        setError("Error from server");
      });
  }

• React端自行设置的3个Cookie正常生效，但Spring返回的Set-Cookie未出现在浏览器Application面板的localhost:3000 Cookie列表中
• Postman能正常获取该Cookie，浏览器控制台可见Set-Cookie响应头及请求面板的Cookie标签，但浏览器不保存
• 后续请求中无该Cookie，浏览器未自动携带到后端
• Firefox测试结果一致

解决方案 #

1. 给fetch请求添加credentials: 'include' #

跨域请求中，浏览器默认不会携带或保存Cookie，必须显式声明该参数，否则服务器返回的Set-Cookie会被忽略。修改fetch代码：

await fetch("http://localhost:8080/auth/login", {
  method: "POST",
  credentials: 'include', // 新增此行
  body: JSON.stringify({
    email: email,
    password: password,
  }),
  headers: {
    Accept: "application/json",
    "Content-Type": "application/json",
  },
})

同域请求可用'same-origin'，跨域必须用'include'。

2. 移除Cookie的domain显式设置 #

浏览器对localhost域名的Cookie处理有特殊规则，显式设置domain: "localhost"可能导致端口不匹配，进而无法保存。修改Cookie构建代码：

ResponseCookie.from("cookie_name", value)
                .path("/")
                .httpOnly(true)
                .secure(false)
                // 去掉domain配置，让浏览器自动匹配
                .build()
                .toString();

3. 调整SameSite属性 #

本地跨端口测试时，推荐将SameSite设为Lax（默认值）；若需更宽松的跨域Cookie，设为None则必须配合secure: true（但本地HTTP环境下secure: true会失效）。示例：

ResponseCookie.from("cookie_name", value)
                .path("/")
                .httpOnly(true)
                .secure(false)
                .sameSite("Lax")
                .build()
                .toString();

4. 校验Spring跨域配置完整性 #

确保所有涉及跨域的控制器或全局跨域配置都开启了allowCredentials = "true"，且origins是精确的前端地址（包含协议和端口）。

5. 检查浏览器Cookie限制 #

• 确认浏览器未禁用Cookie
• 排查隐私类插件是否阻止了Cookie存储
• 检查Cookie的名称、值是否符合浏览器长度或字符限制

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