带有CORS的Ajax进度栏

Question

On local server my upload file and progress bar work as intended. When I upload to our test server(which uses CORS for the upload), the XHR progress callback causes some CORS issues.

XMLHttpRequest cannot load . Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '' is therefore not allowed access.

We already have CORS enabled on the server and the ajax request, which was required to get the upload to work cross origin in the first place, but something about the XHR field is causing it to throw that error.

   $.ajax({
            url: chatOptions.siteRoot + 'obfuscatingthispartofurl/controller?param=' + user.RoomName,
            data: data,
            enctype: 'multipart/form-data',
            processData: false,
            contentType: false,
            type: 'POST',
            xhrFields: {
               withCredentials: chatOptions.useCors
            },
            crossDomain: chatOptions.useCors,
               xhr: function () {
                  var xhr = new window.XMLHttpRequest();
                  xhr.withCredentials = xhr.useCredentials = chatOptions.useCors;
                  xhr.crossDomain = chatOptions.useCors;
                
                  //Upload progress
                  xhr.upload.addEventListener("progress", function (evt) {
                     if (evt.lengthComputable) {
                        var percentComplete = evt.loaded / evt.total;
                        //Do something with upload progress
                        console.log("upload is " + Math.round(percentComplete*100) + "% complete.");
                        var elem = document.getElementById("upload-progress-bar");
                        elem.style.width = Math.round(percentComplete * 100) + '%';
                        document.getElementById("upload-progress-bar").innerHTML = Math.round(percentComplete * 100) + '%';
                     }
                  }, false);
                  return xhr;
               },
            success: function (result) {
               document.getElementById("file-upload-input").value = "";
               console.log(result);
               if (result == "success")
                  chat.server.sendDownload(file.name, file.size);
               $('#file-upload-input').hide();
               $('#file-upload-input-label').hide();
               $('#upload-progress-div').hide();
            },
            error: function (xhr, status, p3, p4) {
               var err = "Error " + " " + status + " " + p3 + " " + p4;
               if (xhr.responseText && xhr.responseText[0] == "{")
                  err = JSON.parse(xhr.responseText).Message;
               console.log(err);
            }
         });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

</div>