Vite doesn't send cookie headers... what am I missing?

[rodrigocfd]

I'm trying to configure a proxy, but the cookie headers are not being sent.

I'm trying to reach the following server URL:

http://localhost:8080/trunk/api/some/resource

The request being made:

fetch('/api/some/resource')
    .then(resp => resp.json())
    .then(data => console.log(data));

I configured Vite like this:

export default defineConfig(({command, mode}) => ({
    plugins: [react()],
    server: {
        port: 8081,
        proxy: {
            '/api': {
                target: 'http://localhost:8080/trunk',
                changeOrigin: true,
            },
        },
    },
}));

The server requires authentication, a JSESSIONID cookie. I'm authenticating in the browser. After that, if I just copy & paste the request URL in the browser, it works, returning the JSON data.

In the Vite application, the fetch returns a 401 error code (Unauthorized)... however, if I manually set the cookie header, for example:

'/api': {
    target: 'http://localhost:8080/trunk',
    changeOrigin: true,
    headers: { cookie: 'JSESSIONID=FRCm9jB1wsuNd4sRhPrxsGVF' },
}

Then it works, which means the cookie header is not being sent by Vite.

What am I missing?

[vzkhrv]

same issue. @rodrigocfd did u solve this?

[Jealh-h]

maybe you can try to set the credentials option

fetch('/api/some/resource',{credentials: "include"})
    .then(resp => resp.json())
    .then(data => console.log(data));

[rodrigocfd]

After trying many things, I found out that you need to set the entry from the root of the URL, so the cookies are saved with the correct path. In the example above, it would be:

proxy: {
    '/trunk': {
        target: 'http://localhost:8080',
        changeOrigin: true,
    },
},

And then the fetch would be:

fetch('/api/some/resource')

I believe this should be in the documentation.

I hope this works for you too, @monteki.

[slanden]

I'm having the same issue described in the title, except I'm not doing any proxy stuff. I have a backend on one localhost port and a frontend (Vite dev server) on another localhost port. The server sends the cookies, but the frontend is not saving them in the browser. Anybody else working with SPAs having this issue?

[Its-Just-Nans]

That's weird

Are you making the good request ?

In case of the configuration above, you should make a request like

fetch("localhost:8090/api/route");

Navigator --> ViteJS server (8090) --> your backend (8080)

Another bug can be in the definition of the routes which are proxied

[Calebsworld]

I solved it. I’ll post my solution in a few

[Calebsworld]

export default defineConfig({
plugins: [react()],
server: {
proxy: {
'/api': {
target: 'http://localhost:3500/',
changeOrigin: true,
}
}
},
})

[BrajBliss]

After 45 minutes of going through the documentation, stack overflow, and copilot I finally found the solution in this comment. Thanks!

[ragnarbull]

Thank you, had the same problem with a proxy and cookies, now working :)

[Ksj14-kumar]

I have same issue with vite +react. I don't know how to solve this. but it is work with CRA.

[Calebsworld]

I’ll share my solution after work. I set up a proxy server

[Ksj14-kumar]

I have solved. my mistak is that backend and frontend run on different domain localhost for backend and 127.0.0.1 for frontend (localhost !=127.0.0.1 must be same for set credentials like set cookie, but as we all know localhost===127.0.0.1 ). So it is necessary that backend and frontend must be have same domain or run on same domain. by the way, thanks for reply

[dexbros]

I have solved. my mistak is that backend and frontend run on different domain localhost for backend and 127.0.0.1 for frontend (localhost !=127.0.0.1 must be same for set credentials like set cookie, but as we all know localhost===127.0.0.1 ). So it is necessary that backend and frontend must be have same domain or run on same domain. by the way, thanks for reply

what you will be doing in production?

[Ksj14-kumar]

@jayboro100 ,
for Production, I compiled the frontend whole code and generate the dist folder(HTML, CSS, JS ) and then I rendered the whole HTML, CSS, JS file into backend on * route. now frontend and backend run on same domain.

[kiryls]

similar issue with my code. I have a Vue project with Vite and Tomcat as backend.
backend on 8080
frontend on 5173

vite.config.ts:

export default defineConfig({
  plugins: [vue()],
  server: {
    proxy: {
      "/api/v1": {
        target: "http://localhost:8080/bookit",
        changeOrigin: true,
      },
    },
  },
});

then i do login with basic auth using axios:

async function login() {
  axios.defaults.withCredentials = true;

  axios
    .get("/api/v1/login", {
      withCredentials: true,
      auth: {
        username: username.value,
        password: password.value,
      },
    })
    .then(response => {
      // here i store the session id in a pinia store
    });
}

and finally, when i'm trying to fetch some authorized data, i get 401 from my backend (new session is created bc no cookie with jsessionid was received):

async function callApi() {
  axios
    .get("/api/v1/users", {
      headers: {
        Authorization: "Bearer " + session,
        Cookie: `JSESSIONID=${session}; Path=/bookit; HttpOnly;`,
      },
    })
    .then((response) => {
      console.log(response.data);
    })
    .catch((err) => {
      console.log(err.message);
    });
}

when i look the at the cookies exchanged in the Network pane of firefox i get just the response cookie and obviously no request one. i'm kinda stuck and don't know what to do. any help would be greatly appreciated

[kiryls]

as far as i know i'm on localhost in both front and back end.

this is what i see when i send login request:

and this is inside cookies tab:

by what i'm seeing i have the path attribute but not the domain in the set-cookie header of the response

[Its-Just-Nans]

@kiryls

Did you try

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  server: {
    port: 3000,
    proxy: {
      "/api": {
        target: "http://localhost:8080/bookit",
        changeOrigin: true,
        cookiePathRewrite: {
          "*": "/",
        },
      },
    },
  },
});

?

[kiryls]

omg everything worked! you really helped me, i didn't even hope to find help like this on the internet, especially on an issue solved more than a year before. but now i'm kinda confused why the rewriting helped. later i'll dig into the matter to see what's happening under the hood on my own, but in the meantime thank you very much, this issue was weird for me

also, i need to ask, does it happen that you know something about URL rewriting in cases when cookies aren't sent because they're blocked in some way? is there any little tweak to do it with your proxy?

[Its-Just-Nans]

Yes, you're right. Your application is sending a cookie with the Path=/bootkit, and it's now being rewritten to /. Therefore, I believe that in certain cases, especially in a production environment, it might not function as intended.

You might want to refer to the information provided in the Mozilla Developer Network documentation: https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies, specifically the section about the Path attribute.

The purpose of the Path attribute is to determine when the cookie should be sent. Here's how it works:

If the path of the request matches the Path specified in the cookie, then the cookie will be sent.
If the paths don't match, the cookie won't be sent.

When you rewrite the Path to /, the cookie will always be sent because any request path will match the root path.

Maybe you will need to change your backend to use the Path=/ by default (like this, you can delete the rewriting made by the Proxy, and you will have the same environnement in dev or production)

For info, here is a simple project using vue and a backend (with a cookie) : https://github.com/Its-Just-Nans/vite-proxy-vue-backend

EDIT repo moved here https://github.com/Its-Just-Nans/can-be-useful/tree/main/js-vite-proxy-vue-backend

[kiryls]

yeah now it starts to make some sense. later i'll check the project you linked, many thanks again.

[uttampun44]

configured the vite like this
it will work

export default defineConfig(({command, mode}) => ({
plugins: [react()],
server: {
port: 8081,
proxy: {
'/trunk/api/some/resource: {
target: 'http://localhost:8080/',
changeOrigin: true,
},
},
},
}));

when you are fetching data this url should be same /trunk/api/some/resource not required to write localhost
fetch('/trunk/api/some/resource')
.then(resp => resp.json())
.then(data => console.log(data));

[capveg-netdebug]

FYI: I ran into this problem as well and the solutions only mostly worked for me. Here's what I also had to do:

1. I needed the proxy as described here, but it's critical that the URL in the proxy config match what you the developer types into the webbrowser (e.g., even if 127.0.0.1 and 'localhost' go to the same place, they are different 'domains' from a cookie perspective and won't work)
2. It seems that chrome (at least, maybe other browsers) will no longer issue cookies for 'localhost' so I had to use an IP address, e.g., 127.0.01
3. It seems that at least on my Windows machine running IPv6 in dual stack mode, my app was only binding the v6 address internally so I actually had to use the IPv6 address in the URL, i.e., "http://[::1]:5173" for the browser and "http://[::1]:8080" for the backend proxy.

I post this all here in case it helps someone :-)

[karanshukla]

FYI: I ran into this problem as well and the solutions only mostly worked for me. Here's what I also had to do:

1. I needed the proxy as described here, but it's critical that the URL in the proxy config match what you the developer types into the webbrowser (e.g., even if 127.0.0.1 and 'localhost' go to the same place, they are different 'domains' from a cookie perspective and won't work)
2. It seems that chrome (at least, maybe other browsers) will no longer issue cookies for 'localhost' so I had to use an IP address, e.g., 127.0.01
3. It seems that at least on my Windows machine running IPv6 in dual stack mode, my app was only binding the v6 address internally so I actually had to use the IPv6 address in the URL, i.e., "http://[::1]:5173" for the browser and "http://[::1]:8080" for the backend proxy.

I post this all here in case it helps someone :-)

THANK YOU SO MUCH! The first two points were crucial for fixing my cookie issues after 12 grueling hours of debugging. Thank you so much!!!