Vue JS Cookie not set in Request Headers

Problem:

I was just learning VueJS and wrote a method to get some JSON data but I noticed that the current session of the user was not sent with the call. My code is as follows

var builder = new Vue({
  el: '.my-element-class',

  data: {
    fetchedData: [],
    url: url,
  },

  // Fetch JSON data.
  created: function () {
    fetch(url , {method: 'get',
       headers: {
         'Content-Type': 'application/x-www-form-urlencoded'
       },
    })
      .then(r => r.json())
      .then(fetchedData => {
        this.fetchedData=fetchedData;
      });
  }

})

Although I did this call I kept getting a "Access denied (403)" response. The weird thing for me was that fact that I was already logged in. Usually if its the same domain then we do not need to add the current users credentials manually.

Solution:

I found out that in VueJS you need to do it manually so the corrected code is below. All i needed to do was to add "credentials: 'include' ", property.

var builder = new Vue({
  el: '.my-element-class',

  data: {
    fetchedData: [],
    url: url,
  },

  // Fetch JSON data.
  created: function () {
    fetch(url , {method: 'get',
       headers: {]
         'Content-Type': 'application/x-www-form-urlencoded'
       },
      credentials: 'include',
    })
      .then(r => r.json())
      .then(fetchedData => {
        this.fetchedData=fetchedData;
      });
  }

})