CSRF with Django, React+Redux using Axios
<p>This is an educational project, not for production. I wasn't intending to have user logins as part of this.</p>

<p>Can I make POST calls to Django with a CSRF token without having user logins? Can I do this without using jQuery? I'm out of my depth here, and surely conflating some concepts.</p>

<p>For the JavaScript side, I found this <a href="https://www.npmjs.com/package/redux-csrf" rel="noreferrer">redux-csrf</a> package. I'm not sure how to combine it with my <code>POST</code> action using Axios:</p>

<pre class="lang-js prettyprint-override"><code>export const addJob = (title, hourly, tax) =&gt; {
  console.log("Trying to addJob: ", title, hourly, tax)
  return (dispatch) =&gt; {
    dispatch(requestData("addJob"));
    return axios({
      method: 'post',
      url: "/api/jobs",
      data: {
        "title": title,
        "hourly_rate": hourly,
        "tax_rate": tax
      },
      responseType: 'json'
    })
      .then((response) =&gt; {
        dispatch(receiveData(response.data, "addJob"));
      })
      .catch((response) =&gt; {
        dispatch(receiveError(response.data, "addJob"));
      })
  }
};
</code></pre>

<hr>

<p>On the Django side, I've read <a href="https://docs.djangoproject.com/en/1.10/ref/csrf/" rel="noreferrer">this documentation</a> on CSRF, and <a href="https://docs.djangoproject.com/en/1.10/topics/class-based-views/intro/#decorating-class-based-views" rel="noreferrer">this</a> on generally working with class based views.</p>

<p>Here is my view so far:</p>

<pre><code>class JobsHandler(View):

    def get(self, request):
        with open('./data/jobs.json', 'r') as f:
            jobs = json.loads(f.read())

        return HttpResponse(json.dumps(jobs))

    def post(self, request):
        with open('./data/jobs.json', 'r') as f:
            jobs = json.loads(f.read())

        new_job = request.to_dict()
        id = new_job['title']
        jobs[id] = new_job

        with open('./data/jobs.json', 'w') as f:
            f.write(json.dumps(jobs, indent=4, separators=(',', ': ')))

        return HttpResponse(json.dumps(jobs[id]))
</code></pre>

<p>I tried using the <a href="https://docs.djangoproject.com/en/1.10/ref/csrf/#django.views.decorators.csrf.csrf_exempt" rel="noreferrer"><code>csrf_exempt</code></a> decorator just to not have to worry about this for now, but that doesn't seem to be how that works.</p>

<p>I've added <code>{% csrf_token %}</code> to my template.</p>

<p>This is my <code>getCookie</code> method (stolen from Django docs):</p>

<pre><code>function getCookie(name) {
    var cookieValue = null;
    if (document.cookie &amp;&amp; document.cookie !== '') {
        var cookies = document.cookie.split(';');
        for (var i = 0; i &lt; cookies.length; i++) {
            var cookie = cookies[i].trim();
            // Does this cookie string begin with the name we want?
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}
</code></pre>

<p><a href="https://www.snip2code.com/Snippet/573695/override-axios-default-csrf-header-and-c" rel="noreferrer">I've read</a> that I need to change the Axios CSRF info:</p>

<pre><code>var axios = require("axios");
var axiosDefaults = require("axios/lib/defaults");

axiosDefaults.xsrfCookieName = "csrftoken"
axiosDefaults.xsrfHeaderName = "X-CSRFToken"
</code></pre>

<p>Where do I stick the actual token, the value I get from calling <code>getCookie('csrftoken')</code>?</p>