title: how to set cookies during vuejs post
body: <p>I am trying to send post data to a django Restful API using vuejs. here is the code I have so far:</p>
  
  <pre><code>&lt;script&gt;
  import axios from 'axios'
  import VueCookies from 'vue-cookies'
  //3RD ATTEMPT
  VueCookies.set("csrftoken","00000000000000000000000000000000");
  // @ is an alias to /src
  export default {
    name: "Signup",
    components: {},
    data: () =&gt; {
    },
    methods: {
      sendData(){
          // 2ND ATTEMPT
          // $cookies.set("csrftoken", "00000000000000000000000000000000");
          axios({
              method: 'post', //you can set what request you want to be
              url: 'https://localhost:8000/indy/signup/',
              data: {
                  csrfmiddlewaretoken: "00000000000000000000000000000000",
                  first_name: "wade",
                  last_name: "king",
                  email: "wade%40mail.com",
                  password1: "05470a5bfe",
                  password2: "05470a5bfe"
              },
              // 1ST ATTEMPT
              // headers: {
              //     Cookie: "csrftoken= 00000000000000000000000000000000"
              // },
              withCredentials: true
          })
      }
    }
  &lt;/script&gt;
  </code></pre>
  
  <p>I have a button which executes the sendData() method on a click. The code uses the axios library to send a post request to the django API running on <a href="http://localhost:800/indy/signup/" rel="nofollow noreferrer">http://localhost:800/indy/signup/</a>  </p>
  
  <p>The problem with just sending a post request to the API is that it will get blocked in order to prevent Cross Site Response Forgery (CSRF), I dont quite understand CSRF but I know if the csrftoken is set as a cookie and has the same value as the csrfmiddlewaretoken then the post should go through to the API.</p>
  
  <p>You can see my attempts to set the cookie in the code I provided  </p>
  
  <p><strong>1ST ATTEMPT)</strong></p>
  
  <pre><code>headers: {
      Cookie: "csrftoken= 00000000000000000000000000000000"
  },
  </code></pre>
  
  <p>Here I'm trying to set the cookie directly in the header. When I click send I get an error in my browser console saying <em><code>refused to set unsafe header "Cookie"</code></em></p>
  
  <p><strong>2ND ATTEMPT)</strong></p>
  
  <pre><code>$cookies.set("csrftoken", "00000000000000000000000000000000");
  </code></pre>
  
  <p>Here I'm trying to set the cookie using the vue-cookies module. When i click send I get the following error, <em><code>net::ERR_SSL_PROTOCOL_ERROR</code></em></p>
  
  <p><strong>3RD ATTEMPT)</strong></p>
  
  <pre><code>VueCookies.set("csrftoken","00000000000000000000000000000000");
  </code></pre>
  
  <p>Here I'm trying to set a global cookie using the vue-cookies module. When I click send I get the same error as attempt 2</p>
  
  <p><strong><em>IMPORTANT:</em></strong>
  However when I send post data to the API from my terminal using the following curl command, it works perfectly</p>
  
  <pre><code>curl -s -D - -o /dev/null \
  -H 'Cookie: csrftoken= 00000000000000000000000000000000' \
  --data 'csrfmiddlewaretoken=00000000000000000000000000000000&amp;first_name=wade&amp;last_name=king&amp;email=wade%40mail.com&amp;password1=05470a5bfe&amp;password2=05470a5bfe' \
  http://localhost:8000/indy/signup/
  </code></pre>
  
  <p>my main question is <strong>How can I replicate this curl request using vuejs?</strong> I've looked all over on line and none of the tutorials deal with setting cookies.</p>