XMLHttpRequest upload.addEventListener "progress" doesn't work

Question

I'm trying to show a progress bar when I'm uploading a file. but when I use XMLHttpRequest upload progress eventListener it doesn't work and return these errors in the console => "Access to XMLHttpRequest at 'server address' from origin 'http://127.0.0.1:5501' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource." And "POST http://serveraddress:/ net::ERR_FAILED". I have tried some ways but I have no idea why this happens. I will thank you if you tell me what can I do... Here is my javascript code:

var oOutput = document.getElementsByClassName("file-result")[0],
  oData = new FormData(form);

oData.append("action", "6");
oData.append("adminID", checkCookie().toString());

var oReq = new XMLHttpRequest();
oReq.open("POST", "serveraddress", true);

oReq.upload.addEventListener("progress", function(event) {
  let percent = (event.loaded / event.total * 100);
  document.getElementsByClassName("insider-bar")[0].style.width = percent + '%';
  document.getElementById('progress-percent').innerHTML = percent + '%';
  console.log(event.total);
});

oReq.onload = function(oEvent) {
  if (oReq.status == 200) {
    document.getElementsByClassName('progressbar-wrapper')[0].style.display = "none";

    if (fileCounter == 0) {
      coverLink = oReq.responseText;
    } else {

      if (oReq.responseText.indexOf(".mp4") == -1)
        imageFilesLink.push(oReq.responseText);
      else
        videoFilesLink.push(oReq.responseText);
      let fileDiv = document.createElement("div");
      fileDiv.className += "files ".concat(oReq.responseText);
      fileDiv.innerHTML = '<i class=\"fa fa-link\"></i>';
      fileDiv.setAttribute("onclick", 'setClipboard("server-address' + oReq.responseText + '")');

      fileDiv.setAttribute("ondblclick", 'showPictures("serveraddress' + oReq.responseText + '")');
      document.getElementById("file-result").appendChild(fileDiv);
    }
    fileCounter++;
  } else {
    document.getElementsByClassName('progressbar-wrapper')[0].style.display = "none";
  }
};
oReq.send(oData);
ev.preventDefault();

<div class="progressbar-wrapper">
  <div class="upload-progress">
    <div class="insider-bar"></div>
  </div>
  <p id="progress-percent">0%</p>
</div>

Answer 1

You can find another way in this address:

https://attacomsian.com/blog/xhr-monitor-progress

xhr.onprogress = (event) => { console.log(Downloaded ${event.loaded} of ${event.total} bytes); }