title: CSRF token AJAX based post in a Django Project
body: <p>So I found out the error and it was in my HTML. I just added <code>{% csrf_token %}</code> and it worked :) thanks for the assist guys!</p>
  
  <blockquote>
    <p>(I used the JS snippet given to me in the first answer but I am still
    getting a 403 Forbidden error!) what could I be doing wrong?</p>
  </blockquote>
  
  <p>I recently learnt JS and tried the following JS code for AJAX POST but I am getting a 403 error. Did some further research and found that I needed to pass a CSRF token. I have gone through a lot of tutorials online but the only solutions I was able to find were of JQuery and I have no idea how that syntax works. I need to know how to pass a CSRF token via Javascript AJAX based post for a django project. My code is;</p>
  
  <pre><code>var upvoteBtn = document.querySelector('#upvote');
  var downvoteBtn = document.querySelector('#downvote');
  
  upvoteBtn.addEventListener('click', jL);
  downvoteBtn.addEventListener('click', cL);
  
  function jL(event) {
      document.getElementById("upvote").style.display='none';
      document.getElementById("downvote").style.display='none';
      var http = new XMLHttpRequest ();
      var url = 'entered my url here';
      var data = 'title=Post%20Title&amp;body=Body';
      var method = 'POST';
  
      http.open(method, url, true);
      http.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
      http.setRequestHeader("X-CSRFToken", csrftoken);
      http.onreadystatechange = function() {
  
      if (http.readyState === XMLHttpRequest.DONE &amp;&amp; http.status === 200){
          document.getElementById("first").innerHTML = "this post has been voted";
          console.log("upvote given");
      }
      else if (http.readyState === XMLHttpRequest.DONE &amp;&amp; http.status !== 200){
          console.log("error!", http.responseText);
      }
  };
  
  http.send(data);
  }
  
  function cL(event){
      document.getElementById("upvote").style.display='none';
      document.getElementById("downvote").style.display='none';
      var http = new XMLHttpRequest ();
      var url = 'entered my url here';
      var data = 'title=Post%20Title&amp;body=Body';
      var method = 'POST';
  
      http.open(method, url, true);
      http.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
      http.setRequestHeader("X-CSRFToken", csrftoken);
      http.onreadystatechange = function() {
  
      if (http.readyState === XMLHttpRequest.DONE &amp;&amp; http.status === 200){
          document.getElementById("first").innerHTML = "got downvoted";
          console.log("downvoted!");
      }
      else if (http.readyState === XMLHttpRequest.DONE &amp;&amp; http.status !== 200){
          console.log("error!", http.responseText);
      }
  }; 
  http.send(data);
  }
  
  //function for CSRF token
  function getCookie(cname) {
      var name = cname + "=";
      var decodedCookie = decodeURIComponent(document.cookie);
      var ca = decodedCookie.split(';');
      for(var i = 0; i &lt;ca.length; i++) {
          var c = ca[i];
          while (c.charAt(0) == ' ') {
              c = c.substring(1);
          }
          if (c.indexOf(name) == 0) {
              return c.substring(name.length, c.length);
          }
      }
      return "";
  }    
  var csrftoken = getCookie('csrftoken'); 
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/gk5Bk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gk5Bk.png" alt="this is the error I receive when I clicked on the button mentioned in my code to send some data"></a></p>