0

I am putting together a simple website but found that the browsers refuse to save any cookies my server sends them. Under what conditions might a browser reject the Set-Cookie header from a server? The cookies are fairly ordinary:

Set-Cookie: auth=XXXXX; expires=Wed, 26 Jul 2023 14:47:20 GMT; HttpOnly; Max-Age=300; Path=/; SameSite=Lax

but I also tried sending quite a few variants of simple cookies (e.g. no HttpOnly, with a nd without expire, etc).

Set-Cookie: COOKIE-NAME=COOKIE-VALUE; Path=/

Yet nothing seems to work. When inspecting the response headers they look as you would expect, and Chrome' dev tools do not indicate any issue with e.g. SAMESITE settings.

FE and BE are cross-domain - which seems like it may be problematic.

Frontend: localhost:3000
backend : localhost:8000

I have tried Chrome, Firefox, and Safari but all three behave the same way. I have a more technical question here but I think this question is fundamentally the issue without Axios/Django specifics.

I think it may have something to do with requests originating from javascript in the frontend versus requests made by the browser.

I was able to set a cookie (and the browser saved it) when the backend served some HTML directly (as opposed to being an API server, which is what I am having issues with). However, when I try to use Axios/fetch within Javascript (React) the browser ignores Set-Cookie. Perhaps it is CORS related?

Chrome dev tools shows the request type that does work (the direct HTML/text served from backend) as document, while the request from Javascript (when backend is just an API is xhr).

sherrellbc
  • 4,650
  • 9
  • 48
  • 77
  • How does the client send the request to which the server responds with that `Set-Cookie` header? If you're using Axios, the client must use `withCredentials: true`. Besides, the server will need to be configured for CORS: it will need to allow the client's Web origin and respond with `Access-Control-Allow-Credentials: true`. – jub0bs Jul 26 '23 at 17:10
  • @jub0bs It is using Axios, and I do have `withCredentials` set. But as I understood this parameter this is only needed if you want the browser to send along any existing site data (e.g. cookies) in the request. The issue I'm presenting above has to do with the browser rejecting the already-received cookies from the backend via Axios request. So they never make it into the store to be used later. As I understand it, that setting just sets [XHR.withCredentials=True](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/withCredentials) and the browser takes it from there. – sherrellbc Jul 26 '23 at 17:19
  • And as for CORS, backend sets `Access-Control-Allow-Credentials` to true and `Access-Control-Allow-Origin` to be `http://localhost:3000` - reflecting the origin of the frontend. – sherrellbc Jul 26 '23 at 17:21
  • I think the issue is well defined [here](https://stackoverflow.com/a/46412839/2446071). It's a wonder what knowledge is lost amongst developers these days when frameworks manage all the hard stuff for you. – sherrellbc Jul 27 '23 at 14:30

0 Answers0