title: CSRF with Django, React+Redux using Axios
body: <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>