New Mar 4, 2026

How to make cookies work with axios and vue3-cookies?

Libraries, Frameworks, etc. All from Newest questions tagged vue.js - Stack Overflow View How to make cookies work with axios and vue3-cookies? on stackoverflow.com

I have successfully created a session-based, httpOnly-cookie stored authentification process between my Vue3 frontend and Spring Boot backend. Now, since the authentification cookie is httpOnly, I cant access it on the frontend (afaik). But the login backend gives back the user id (an integer) of the user who just logged in, which I store in a variable named activeSession, which I use in several v-ifs. As long as I follow links on my site (proper RouterLinks), everything is fine. For example, I can visit localhost/profile/1 via links no problem. However, when I change the address bar to e.g. localhost/profile/2 and hit enter, activeSession is reset. I would like to avoid that.

What I tried: My idea was cookies, and I successfully send a cookie containing the user id from the backend, and it IS being received according to the agent console, but I don't see it anywhere during frontent debugging. More specifically, whenever I debug into

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 });
    }

the result does not contain the set-cookie header (a feature of axios, or so I have heard) and vue3-cookies doesn't sees it either. The session cookie is EXPLICITLY not httpOnly and visible in the response in the user agent. Cookie is also set when using Postman. This is my current CORS config in the backend:

        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");

How can I make the cookie-solution work?

I have read many SO posts with similar problems, but so far no solution has worked for me.

Scroll to top