title: Proper Django CSRF validation using fetch post request
body: <p>I'm trying to use JavaScript's <a href="https://developer.mozilla.org/en/docs/Web/API/Fetch_API" rel="noreferrer">fetch</a> library to make a form submission to my Django application. However no matter what I do it still complains about CSRF validation.</p>
  
  <p>The docs on Ajax mentions specifying <a href="https://docs.djangoproject.com/en/1.11/ref/csrf/#setting-the-token-on-the-ajax-request" rel="noreferrer">a header</a> which I have tried.</p>
  
  <p>I've also tried grabbing <a href="https://docs.djangoproject.com/en/1.11/ref/csrf/#how-to-use-it" rel="noreferrer">the token from the templatetag</a> and adding it to the form data. </p>
  
  <p>Neither approach seems to work.</p>
  
  <p>Here is the basic code that includes both the form value and the header:</p>
  
  <pre><code>let data = new FormData();
  data.append('file', file);;
  data.append('fileName', file.name);
  // add form input from hidden input elsewhere on the page
  data.append('csrfmiddlewaretoken', $('#csrf-helper input[name="csrfmiddlewaretoken"]').attr('value'));
  let headers = new Headers();
  // add header from cookie
  const csrftoken = Cookies.get('csrftoken');
  headers.append('X-CSRFToken', csrftoken);
  fetch("/upload/", {
      method: 'POST',
      body: data,
      headers: headers,
  })
  </code></pre>
  
  <p>I'm able to get this working with JQuery, but wanted to try using <code>fetch</code>.</p>