CSRF Cookie is not set with react frontend

But no where in the django documents it is mentioned to send the csrftoken as separate cookie rather than sending it in header by the name X-CSRFToken. If you could show me a sample request on how it is supposed to be sent, it would be helpful.

I don’t have any information to provide other than what’s documented in the CSRF Protection docs. I’ve never had any problems with it, it has always “just worked” for me.

Looking back at your first post, I don’t see where you’ve set the CSRF_HEADER_NAME setting. (Also see the AJAX paragraph in the CSRF Protection docs.)

by default CSRF_HEADER_NAME name is HTTP_X_CSRFTOKEN, which is available in the request Meta, still csrf cookie not set error is thrown

ken, when i print the request.META i can see the csrf cookie in HTTP_X_CSRFTOKEN key. But once i print request.COOKIES it is returning {} empty.

That’s fine - actually good. (The middleware looks for the cookie before looking for the X-CSRFToken header. If a cookie was being supplied, and was an incorrect cookie, that would have been a cause of a problem.)

1 Like

I have been reading the middleware and making dummy requests, couldn’t find anything wrong with the middleware or the code i wrote. seems like it might be the issue on the frontend.
Thanks for your valuable time ken. I really appreciate it. If i get to know what might have caused this issue, i will surely update here

1 Like

Hello @Bharath3697, I have been facing the same issue you had been facing and I managed to fix it. No, it’s not a frontend issue. You just need to add a few configurations in your settings.py of your Django App.

You just need to add CSRF_TRUSTED_ORIGINS where you specify your web app URL

CSRF_TRUSTED_ORIGINS = [
     "example.com"
]

This might be helpful for anyone who is struggling with this (I know the pain)

If you still face the same error try it with this config also:

SESSION_COOKIE_SAMESITE = None

@KenWhitesell , @Bharath3697 , hope you’re doing well and staying safe! :mask:

Environment

  • Django==3.1.1
  • django-cors-headers==3.10.0
  • frontend - React.js

Issue

  • trying to submit a form (used to create new user) (POST), gives 403

  • front-end is React.js so there will is no {% csrf_token %} in the form

  • form used to create new user

  • although, now I know that session is server-side thing and we store those in browser in the form of cookies

  • I’m no longer returning HTTP response from any of the views, because frontend is React.js for this project

  • I’ve managed CORS

CORS_ALLOW_ALL_ORIGINS = True

  • question
  1. how/where_from to get the csrf_token for that particular view function and the request and return it in JsonResponse ?
  2. How could the client can successfully complete the form request ?
  • register page is the first page when client visits server
  • how could client set csrf there ? (in request)

views.py

@ensure_csrf_cookie
def register(request):
    if request.method == "POST":
        username = request.POST["username"]
        email = request.POST["email"]
        password = request.POST["password"]
        confirmation = request.POST["confirmation"]
        try:
            user = User.objects.create_user(username, email, password)
            user.save()
            return JsonResponse({"message":"User Registered."})

Start with the AJAX docs in the CSRF page. That has always covered it for me. (Caveat: I’ve never used React.)

Hi @Bharath3697 did you find a solution?

Nope. I shifted to token based authentication

I don’t know if it will apply to your case but for mine there was no initial path for django project, there was only /api route, that result in browser to not set the cookie. After I added initial hello world get path to base path e.g

GET http://localhost:8080 Respose: Hello World

browser started to set the cookie