weixin_33736832 2016-03-29 21:09 采纳率: 0%
浏览 37

带有CORS的Ajax进度栏

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>
  • 写回答

0条回答 默认 最新

    报告相同问题?

    悬赏问题

    • ¥15 电脑键盘实现触摸功能
    • ¥25 matlab无法将表达式转换为双数组怎么解决?
    • ¥15 单片机汇编语言相关程序
    • ¥20 家用射频美容仪技术规格
    • ¥15 大家帮我看看为什么错了
    • ¥15 unity互动琴弦抖动效果
    • ¥15 做了个的二极管反向饱和电流测量电路,但是测试达不到效果
    • ¥15 nginx无证书访问https失败
    • ¥15 树莓派启动AP热点传入数据
    • ¥15 multisim中关于74ls192n和DSWPK开关的问题(相关搜索:计数器)