Using The Fetch Api With Django Rest Framework

The fetch api is a pretty cool thing that can really simplify client networking code. So how would one go about to use it with django-rest-framework?

Server

First, make sure you use the SessionAuthentication in Django. Put this in your settings.py

Django rest framework

REST_FRAMEWORK = {
    'DEFAULT_AUTHENTICATION_CLASSES': [
        'rest_framework.authentication.SessionAuthentication'
    ]
}

Client

Then start with including the getCookie method from the Django Docs.

Finally use the fetch method to call your endpoint.

var myData = {
    hello: 1
};

fetch("/api/v1/endpoint/5/", {
    method: "put",
    credentials: "same-origin",
    headers: {
        "X-CSRFToken": getCookie("csrftoken"),
        "Accept": "application/json",
        "Content-Type": "application/json"
    },
    body: JSON.stringify(myData)
}).then(function(response) {
    return response.json();
}).then(function(data) {
    console.log("Data is ok", data);
}).catch(function(ex) {
    console.log("parsing failed", ex);
});

Easy!