XmlHttpRequest is sending invalid JSESSIONID

I am trying to send a file to my Backend using XMLHttpRequest. In the backend, I am using spring security. The frontend uses Angular 2. The problem is that the XMLHttpRequest sends a completely different JSESSIONID Cookie (always the same) and is denied access. My other requests that use Angular http.post

sent the correct JSESSIONID. The wrong JSESSIONID appears seemingly out of nowhere and I cannot pinpoint the exact cause.

This is my XMLHttpRequest:

  postFormData() {
      return fromPromise(new Promise((resolve, reject) => {
      let formData: any = new FormData()
      let xhr = new XMLHttpRequest()

      formData.append("file", this.file, this.file.name);

      xhr.onreadystatechange = function() {
          if (xhr.readyState === 4) {
              if (xhr.status === 200) {
              resolve(xhr.response)
          } else {
              reject(xhr.response)
      }
  }};


  console.log("sending stuff")
  //xhr.setRequestHeader();
  xhr.open("POST", 'http://localhost:8080/import/loadsheets', true);
  //xhr.setRequestHeader("withCredentials","true");
  xhr.withCredentials = true;
  //xhr.setRequestHeader("Access-Control-Allow-Origin", "*");
  xhr.setRequestHeader("Access-Control-Allow-Credentials", "true");
  //let sess = this.cookieService.get("cookie");
  //console.log('Cookie: ', sess);
  //xhr.setRequestHeader('Cookie', sess);
  xhr.send(formData)
}));
}

      

        
        
        
      

    

This is an election campaign:

And this is the actual request (with the wrong JSESSIONID):

What is the problem? Thanks in advance!