title: "Forbidden (CSRF token missing or incorrect.):" using Django and JS
body: <p>I'm doing a POST request using Axios in my JS code to send some information to my locally hosted Django server.  I have {% csrf_token %} in my html code form but don't know how to send the csrf token using Axios.</p>
  <p>I get this error in the terminal:
  &quot;Forbidden (CSRF token missing or incorrect.): /api/scoring/submit_score_details&quot;.</p>
  <p>How do I correctly insert the csrf token in my axios post?  Right now, I don't think JS can read {{ csrf_token }} as I have it.  I've been searching Stack but it seems most people are using jQuery or some other type of JS.</p>
  <p>To save space I didn't post what the variables in the payload are but they're all just strings.</p>
  <p>I can get the error to go away if I put @csrf_exempt above the my function in the views.py file.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>{
  let payload = {
      "csrfmiddlewaretoken": "{{ csrf_token }}",
      "math_problem": problem,
      "user_answer": userInput,
      "true_answer": correctAnswer,
      "question_status": questionStatus,
  }
  console.log(payload);
  axios.post('../api/scoring/submit_score_details', payload)
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="col text-center"&gt;
      &lt;button id="start" type="button" class="btn btn-primary btn-lg"&gt;
          New Problem
      &lt;/button&gt;
      &lt;p id="math_problem"&gt;&lt;/p&gt;
      &lt;form id="inputForm" method="POST"&gt;
          {% csrf_token %}
          &lt;input id="user_input" autocomplete="off" class="form-control form-control-lg" type="text" placeholder="Type your answer here"&gt;
          &lt;input id="correct_answer" type="hidden"&gt;
      &lt;/form&gt;
      &lt;br&gt;
      &lt;button id="result_check" type="button" class="btn btn-primary btn-lg"&gt;Check&lt;/button&gt;
      &lt;script src={% static 'js/game_logic.js' %}&gt;&lt;/script&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>{
  let payload = {
      "csrfmiddlewaretoken": "{{ csrf_token }}",
      "math_problem": problem,
      "user_answer": userInput,
      "true_answer": correctAnswer,
      "question_status": questionStatus,
  }
  console.log(payload);
  axios.post('../api/scoring/submit_score_details', payload)
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form id="inputForm" method="POST"&gt;
      {% csrf_token %}
      &lt;input id="user_input" autocomplete="off" class="form-control form-control-lg" type="text" placeholder="Type your answer here"&gt;
      &lt;input id="correct_answer" type="hidden"&gt;
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>