Fetch API post data not receiving in Django view-CodePudding

What I am trying to do ?

I am trying to send a post request with data to a Django view using fetch API like this:

javascript:

const data = {
  search_text: "",
  months: 6,
  property_type: "all"
};
const headers = {
   'Accept': 'application/json',
   'Content-Type':'application/json',
   'X-Requested-With':'XMLHttpRequest'
}

fetch("some-url", {method: "POST", headers: headers, body: JSON.stringify(data)})
  .then((response) => response.json())
  .then((data) => console.log(data));

view:

class MyView(View):

  def post(self, request, *args, **kwargs):
     print("request: ", request.POST)
     # do stuff with post data

urls:

re_path(r"^my_view/$", login_required(csrf_exempt(MyView.as_view())), name="my_view"),

Problem

When I try to access the post data in my Django view I get empty QueryDict and the output of the terminal is this:

request:  <QueryDict: {}>
[06/Jan/2022 06:48:19] "POST /my_app/my_view/ HTTP/1.1" 200 114
Forbidden (CSRF token missing or incorrect.): /inbox/notifications/api/unread_list/
[06/Jan/2022 06:48:22] "{"search_text":"","months":"6","property_type":"all"}GET /inbox/notifications/api/unread_list/?max=5 HTTP/1.1" 403 12291

If you notice at the last line the post data seems to get added in the terminal why is that happening ? also why I get Forbidden (CSRF token missing or incorrect.) even when I am using csrf_exempt in the urls ?

I have tried looking it up and nothing seems to work. We are using react and I know axios can also be used but it should work with fetch API why isn't it working please help.

CodePudding user response：

This is because your view is protected by a CSRF-protection-middleware.

You have two possibilities:

Make the view exempt from this protection, see csrf_exempt
Add the CSRF token to your request (see answer from Yevgeniy Kosmak)

CodePudding user response：

You are probably using SessionAuthentication. It enforces the csrf check anyway. So you still have to add X-CSRFToken in order to keep using SessionAuthentication. Some details about that. So add to your headers:

const headers = {
    'Accept': 'application/json',
    'Content-Type': 'application/json',
    'X-Requested-With': 'XMLHttpRequest',
    'X-CSRFToken': getCookie('csrftoken')  // <-- this
}

Where getCookie is implemented like this:

function getCookie(c_name)
{
    if (document.cookie.length > 0)
    {
        c_start = document.cookie.indexOf(c_name   "=");
        if (c_start != -1)
        {
            c_start = c_start   c_name.length   1;
            c_end = document.cookie.indexOf(";", c_start);
            if (c_end == -1) c_end = document.cookie.length;
            return unescape(document.cookie.substring(c_start,c_end));
        }
    }
    return "";
}