This has been asked countless times, yet I am unable to find a solution that works.
When using Axios I found that it (Chrome/the browser) appears to ignore Set-Cookie headers under some circumstances. I am working with a Django backend running django-cors-headers, djangorestframework, djangorestframework-simplejwt, and dj-rest-auth - a fairly typical collection of tooling.
My cross-origin architecture:
React-based frontend: http://127.0.0.1:3000
Django backend: http://127.0.0.1:8000
While building authentication I noticed that my browser is not properly saving cookies that are provided by my backend. For instance,
Preflight OPTIONS response
access-control-allow-credentials: true
access-control-allow-headers: accept, authorization, content-type, user-agent, x-csrftoken, x-requested-with
access-control-allow-methods: DELETE, GET, OPTIONS, PATCH, POST, PUT
access-control-allow-origin: http://127.0.0.1:3000
access-control-max-age: 86400
content-length: 0
Content-Type: text/html; charset=utf-8
Date: Tue, 25 Jul 2023 18:58:48 GMT
Server: WSGIServer/0.2 CPython/3.11.3
Vary: origin
Follow-up response (to authentication with backend)
access-control-allow-credentials: true
access-control-allow-origin: http://127.0.0.1:3000
Allow: POST, OPTIONS
Content-Length: 351
Content-Type: application/json
Cross-Origin-Opener-Policy: same-origin
Date: Tue, 25 Jul 2023 18:58:48 GMT
Referrer-Policy: same-origin
Server: WSGIServer/0.2 CPython/3.11.3
Set-Cookie: auth=XXXXX; expires=Tue, 25 Jul 2023 18:54:44 GMT; HttpOnly; Max-Age=300; Path=/; SameSite=Lax
I can see the cookie in the response, but the browser does not save the cookie into its data store. Nor does it present any warning for why it may be ignoring them. I did find under other circumstances that it would display a small yellow triangle citing a SAMESITE issue, but I am not seeing this now.
I do send axios requests to the backend as
axios.put(URL, data, {withCredentials:true});
and have my backend configured with
CORS_ALLOW_CREDENTIALS = True
Otherwise the browser will reject the attempt to send the request at all per the response it received from the preflight OPTIONS request. And anyway, my understanding of withCredentials was so that the browser would send along any site data (e.g. cookies) it had stored for the domain. But in this case, the issue appears to be in the initial storing of those data.
I tried to adjust which headers were "exposed" to the frontend by trying these (separately, first just Set-Cookie then "everything" as a hammer-tactic).
CORS_EXPOSE_HEADERS = ['Set-Cookie'];
CORS_EXPOSE_HEADERS = ['*']
but the behavior remained the same.
So all this seems to work as far as I can see ... just the browser is opting to ignore any cookies sent to it by the backend and I'm not sure how to debug this.
I feel a if there is a CORS/SAMESITE/? issue lurking here and I just lack the experience to track it down.
EDIT: Sounds like this answer may be relevant here, too.
