Search code examples
djangonginxsingle-page-applicationdjango-csrf

Acquiring CSRF token from Django when index.html is served by nginix

I have a React SPA with a Django backend. Like most SPAs, there is an index.html file that needs to be served. But the problem is that this file is served with nginx, so user does not obtain csrf token required to make api calls. I don't really want to serve index.html, as it would require separating the file from the rest of npm run build output and break the "just put it in /static/ directory" workflow, and also for caching reasons. Is there any other workaround?

Solution

  • CSRF token is always updated with each page load. It has to be served by django since django is the application that provides and validates it. Place the index.html file in your django templates folder, serve it with your index view, translate CSRF token to javascript code and use it in your ReactJS code

    index.html

    ...
<body>
<script>
     var csrftoken = '{{ csrf_token }}';
</script>
...
</body>
...