如何让cookie在 axios和 vue3-cookies中正常工作？

前端开发 2026-07-12

我已经在我的Vue3前端和Spring Boot后端之间成功创建了一个基于会话、使用httpOnly cookie存储的认证流程。

现在，由于认证cookie是 httpOnly的，我在前端无法访问它（据我所知）。但登录后端会返回刚刚登录的用户的用户ID（一个整数），我把它保存在名为 activeSession 的变量中，并在几个 v-ifs中使用。

只要我按照站内通过链接（正确的 RouterLinks），一切都正常。

例如，我可以通过链接无问题地访问 localhost/profile/1。

然而，当我在地址栏中把地址改成例如 localhost/profile/2 并回车时，activeSession 会被重置。

我希望避免这种情况。

我尝试的办法：我的思路是使用cookies，我已经从后端成功发送了一个包含用户ID的 cookie，根据代理控制台的显示，它确实被接收到了，但在前端调试时我没有在任何地方看到它。

更具体地说，每当我调试进入

const result = await axios.post(serverAddress + 'api/v1/auth/login', JSON.stringify(requestBody), {
      headers: { 'content-type': 'application/json' },
      withCredentials: true
    }).then(response => response, reason => reason);
    if (result instanceof Error) {
      alert(result.toString());
    }
    else {
      const r = result;
      activeSession.value = +cookies.get('example.activeSession'); // + is an int cast
      await router.push({ path: '/profile/'+activeSession.value });
    }

结果不包含set-cookie头（据说这是axios的一个特性，或是我所听说的），而vue3-cookies也看不到它。

该会话cookie明确不是httpOnly的，在用户代理的响应中可见。

使用Postman时也会设置该Cookie。

这是我在后端当前的CORS配置：

        response.addHeader("Access-Control-Allow-Origin", origin);
        response.setHeader("Access-Control-Allow-Methods", "GET,POST");
        response.setHeader("Access-Control-Allow-Credentials", "true");
        response.setHeader("Access-Control-Allow-Headers", "content-type,set-cookie");

如何让cookie方案奏效？

我读了许多Stack Overflow的帖子，关于类似的问题，但到目前为止没有一个解决方案对我有用。