title: Why jQuery ajax added same cookie in my request header multiple times?
body: <p>I have been trapped in this on for many hours, wondering if you have could help me out or provide me some suggestion?</p>
  
  <p>Long story short,
  I have a asp.net web api application, In one of my page, I am trying to load some data from web api and add them into few dropdown lists.
  Anyway, I use jQuery ajax when the page loads</p>
  
  <pre><code>$(document).ready(function () {
      //Fires when page loads
      LoadMachines();
      LoadMachieGroups();
      LoadPrinterServer();
      LoadSavePreference();
  });
  </code></pre>
  
  <p>Each of the functions does the similar job, for example </p>
  
  <pre><code> function LoadMachieGroups() {
          console.log("Before group " + document.cookie);
          $.ajax({
              type: "GET",
              contentType: "application/json; charset=utf-8",
              dataType: "json",
              url: "/api/Machine/MachineGroups",
              //data: "{}",
              success: function (response) {
                  OnMachinesGroupLoadSuccess(response);
              }
          });
  
          console.log("after group " + document.cookie);
      }
  </code></pre>
  
  <p>The issue is that, we the code runs to the third (LoadPrinterServer) and fourth function (LoadSavePreference).  The request header passed the same cookies (DoxMachineId) with different values three times. (Please see the picture), which then cause the trouble in my c# code to find the correct result.</p>
  
  <p>My questions are:
  1.) Why could same cookie added in the header multiple times? Is this because of multiple ajax calls?
  2.) How to solve the problem? For example: remove the cookies?</p>
  
  <p>Thanks guys in advanced.</p>
  
  <p><img src="https://i.stack.imgur.com/vcB5w.png" alt="enter image description here"></p>