CORS/CSRF issues (w/ React frontend)

[jeffreybliang]

I would like to host my React frontend on Netlify and my Django backend (that uses Django Allauth) on another hosting site, such as Railway. They have different domains.

I am encountering CORS/CSRF issues where the CSRF token is not being set after the config request is sent, and thus the session request has a null CSRF token field (this corresponds to the error below):
Access to fetch at 'http://localhost/_allauth/browser/v1/auth/session' from origin 'https://privatevoti2.vercel.app/' has been blocked by CORS policy: Request header field x-csrftoken is not allowed by Access-Control-Allow-Headers in preflight response.

I have followed all the CORS advice online, such as the order of the middleware, settings variables to True in the settings.py file and allowing domains etc.

I read here (https://joshkaramuth.com/blog/django-allauth-react/ see "When not to use this tutorial") and it says that you shouldn't have different domains as this will cause issues since CSRF won't work. The react-spa example uses a reverse proxy to route everything to the same domain so I haven't seen many examples with different domains.

Could I please clarify if it is possible to use django-allauth across different domains, and if so, what are the exact settings.py configuration variables I need if I'm hosting my frontend on domain abc.com and my backend on def.com?

Thank you so much!

[pennersr]

If you are using completely unrelated domains, you shouldn't use cookies. Use the app endpoints (as in /_allauth/app/v1/) instead.

[jeffreybliang]

Hi pennersr, thanks for the reply.
Could you please elaborate what you mean by app endpoints? Maybe a code snippet from the existing react-spa would help, but unsure what you mean.
I've also found that when backend and frontend are both on localhost (same domain) but different ports, this issue still happens.