React.js with django-rest-framework using SessionAuthentication: How to include CSRF-Token documentation has not helped me :/

[lnzy...@gmx.de]

 

Hi,

I am getting crazy finding out how to submit data to the django-rest-api via react.js to include a valid CSRF token by using SessionAuthentication.

My template is very basic:

{% extends "base.html" %}

{% load staticfiles %}

{% block title %} ToDo List {% endblock %}

{% block content %}

                <script src="{% static 'js/todos.js' %}"></script>

{% endblock %}

The corresponding JSX File (which I then transform via jsx –x jsx . . to a valid .js file) contains the following:

 

var ToDoForm = React.createClass({

                getInitialState: function() {

                               return {

                                               "todo_source": "",

                                               "todo_description": "",

                                               "todo_due_date": '2015-12-21',

                                               "todo_prio": "1"

                               };

                },

                handleSourceChange: function(e) {

                               this.setState({todo_source: e.target.value});

                },

                handleDescriptionChange: function(e) {

                               this.setState({todo_description: e.target.value});

                },

                handleDateChange: function(e) {

                               this.setState({todo_due_date: e.target.value});

                },

               

                handlePrioChange: function(e) {

                               this.setState({todo_prio: e.target.value});

                },

                               

                handleSubmit: function(e) {

                               e.preventDefault();

                              

                               $.ajax({

                                               url: this.props.url,

                                               dataType: 'json',

                                               type: 'POST',

                                               data: this.props,

                                               success: function(data) {

                                                               this.setState({data: data});

                                                               }.bind(this),

                                               error: function(xhr, status, err) {

                                                               console.error(this.props.url, status, err.toString());

                                                               }.bind(this)

                                               });

                },

 

                render: function() {

                               return (

                               <div className="ToDoForm" onSubmit={this.handleSubmit}>

                               <form>

                              

                               <div className="form-group">

                               <label for="input_todo_source">ToDo source</label>

                               <input type="text" className="form-control" id="input_todo_source" placeholder="Source of the ToDo"   value={this.state.todo_source}               onChange={this.handleSourceChange}></input>

                               </div>

                              

                                <div className="form-group">

                               <label for="input_task_description">ToDo description</label>

                               <input type="text" className="form-control" id="input_todo_description" placeholder="Description of the todo" value={this.state.todo_description} onChange={this.handleDescriptionChange}></input>

                               </div>

                              

                               <div className="form-group">

                               <label for="input_task_due_date">ToDo due date</label>

                               <input type="date" className="form-control" id="input_todo_due_date" placeholder="The due date of the todo" value={this.state.todo_due_date} onChange={this.handleDateChange}></input>

                               </div>

                               <div className="form-group">

                               <label for="input_todo_prio">Todo prio</label>

                               <input type="text" className="form-control" id="input_todo_prio" placeholder="1|2|3 (high|medium|low)" value={this.state.todo_prio} onChange={this.handlePrioChange}></input>

                               </div>

                              

                               <button type="submit" className="btn btn-default">Submit</button>

                               </form>

                               </div>

                               );

                }

});

ReactDOM.render(<TodoForm url="/todo/"/>, document.getElementById('content'));

 

So can anybody please tell me how to include the csrf-token in react.js? https://docs.djangoproject.com/en/1.9/ref/csrf/ has not really helped me nor did I find any example to accomplish that via google.

 

My also data: this.props is wrong then? Since I have to include the token?

Is there a better way?

 

Thank you very much!

Best Regards

[lnzy...@gmx.de]

Solution was to use: csrfmiddlewaretoken insteed of csrftoken.

I hope that will save someones days, that run into the same issues.

 

 

Gesendet: Sonntag, 27. Dezember 2015 um 13:29 Uhr
Von: lnzy...@gmx.de
An: django...@googlegroups.com
Betreff: React.js with django-rest-framework using SessionAuthentication: How to include CSRF-Token documentation has not helped me :/

 

 

 

--
You received this message because you are subscribed to the Google Groups "Django users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to django-users...@googlegroups.com.
To post to this group, send email to django...@googlegroups.com.
Visit this group at https://groups.google.com/group/django-users.
To view this discussion on the web visit https://groups.google.com/d/msgid/django-users/trinity-89d49cc4-75fa-4819-b907-b52935f8e3c7-1451219372016%403capp-gmx-bs17.
For more options, visit https://groups.google.com/d/optout.