I'm writing a single page web application with react on the front end and express and web sockets on the backend. For development I have been running express with nodemon on port 4000 and using vite on the frontend on port 5173. Everything has been working great with both the front end and back end reloading quickly on every change, but now I've added authentication which requires session cookie to be set. This causes problems because cookies aren't shared between different ports on the same host.
I could always just manually rebuild my front end every time I make changes, but that's a pain.
I can't be the only one to deal with this problem. What's the best way to handle this?
Turns out I had to enable additional CORS settings to allow passing the cookie between the two host names.
I added the following headers to the api side:
Access-Control-Allow-Credentials: true
Access-Control-Allow-Methods: GET, POST, PUT, DELETE
Access-Control-Allow-Headers: Content-Type, *
And the following options to each fetch request
{
mode: "cors",
credentials: "include",
}
More details here: https://medium.com/@sharadokey/understanding-cors-and-cross-origin-cookies-bf36d624da78