Angular+Django how to access cookie under different domain
This is a follow up to my previous question (Angular+Django CSRF token not being saved as cookie) since I understand the underlying problem now.
I have a Angular and Django setup and I am trying to get it to work with CSRF tokens. The way I have it set up is, Django includes a token in the response and it's saved as a cookie. Then my Angular interceptor gets the token from the cookie storage and includes it in the header of every subsequent request. This seems to be the only way that works and it works fine locally.
The problem when I deploy the backend is that the returned cookie has a different domain (used to be localhost, now it's the name of the backend host). This means that the Angular cookie service isn't able to find it, so the requests have no CSRF token.
I tried using HttpXsrfTokenExtractor instead, as proposed in https://www.stackhawk.com/blog/angular-csrf-protection-guide-examples-and-how-to-enable-it/. But that doesn't find the cookie either.
I tried using the built-in Angular support for CSRF tokens (https://angular.dev/best-practices/security#httpclient-xsrf-csrf-security) but it doesn't include a token in any request regardless of the setup.
Someone recommended reading the cookie manually from the backend response and then setting it as a cookie myself. But that is also not straightforward and I believe is not as secure.
I tried setting CSRF_COOKIE_DOMAIN to the domain of the frontend (let's say mysite.com) but then the browser just rejects the cookie due to invalid domain.
I'd like to know how to fix this in the given setup, but any alternative setup ideas are also appreciated. I find it strange that this is the only way to get Angular and Django to work together, I feel like there should be an easier solution. Is it an inherent issue of having the front- and backend on different domains?