Using the Fetch Api with Django Rest Framework

info.md

Using the Fetch Api 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! (Remember this will currently only work on Chrome and Firefox)

Any chance of someone posting an example of the django code that receives "myData" and returns the "data"?
Thanks

data_to_get = {
"id": 1,
"name": "Test",
};

function get_conta_receita(data_to_get = {}) {
var myData = {
"id": data_to_get['id'],
"name": data_to_get['name'],
};
const defaults = {
'method': 'GET',
'credentials': 'include',
'headers': new Headers({
'X-CSRFToken': csrf_token,
'Accept': 'application/json',
'Content-Type': 'application/json',
'X-Requested-With': 'XMLHttpRequest'
}),
};

url = montaURL(contas_receita_api, myData);

fetch(url, defaults)
.then(function(response) {
    return response.json();      
}).then(function(data) {
    console.log(data);
}).catch(function(ex) {
    console.log("parsing failed", ex);
});

};

Thanks, it helped me too .

Finally, someone explaining this. Thank you!