Javascript ajax xhr.upload.addEventListener不适用于跨域调用

我正试图通过jqueryajax调用从我的网站创建一个视频上传进度条到位于同一个域但不同端口的后端服务

召唤

以下是我的ajax脚本：

$.ajax({
  xhr: function()
  {
    var xhr = new window.XMLHttpRequest();
    //Upload progress
    xhr.upload.addEventListener("progress", function(evt){
      if (evt.lengthComputable) {
        var percentComplete = evt.loaded / evt.total;
        //Do something with upload progress
      }
    }, false);

   return xhr;
  },
  url: "https://mywebsite.com:3000/api/video/upload",
  data: dataForm,
  cache: false,
  contentType: false,
  processData: false,
  crossDomain: true,
  type: 'POST'
});

调用这个ajax，我的POST请求总是变成选项

OPTIONS https://mywebsite:3000/api/video/upload Invalid HTTP status code 404 

当我删除xhr函数时，ajax脚本工作正常。我可以上传一个视频，但没有进展

---

我的后端构建在node.js上。感谢前面的帮助。

在跨域发送GET、POST方法时，首先通过OPTIONS方法发送“prefleed”请求

---

看起来您得到了404未找到响应。通过允许发送选项方法请求，确保您的请求目标URI返回200 OK之类的值。

我发现我的服务器不支持选项请求，所以我将其添加到node.js文件中

app.options('*', function(req, res, next){
    res.send(200);
});

---

它工作得很好：）

uhmmm尝试这样做：（这是jquery 1.11.x，php文件上传解析器就在html文件旁边）

函数uploadProgressHandler（事件）
{
$（“#加载的”\u n_总数”）.html（“上载的”+event.loaded+“+event.total”字节）；
变量百分比=（event.loaded/event.total）*100；
变量进度=数学四舍五入（百分比）；
$（“#uploadProgressBar”）.html（进度+进度百分比）；
$（“#uploadProgressBar”）.css（“宽度”，进度+“%”）；
$（“#status”）.html（进度+%upload…请稍候）；
}
函数loadHandler（事件）
{
$（“#status”）.html（event.target.responseText）；
$（“#uploadProgressBar”）.css（“宽度”、“0%”）；
}
函数errorHandler（事件）{
$（“#状态”）.html（“上载失败”）；
}
函数abortHandler（事件）{
$（“#状态”）.html（“上传中止”）；
}
$（“#上载文件”）。单击（函数（事件）
{
event.preventDefault（）；
var file=$（“#fileUpload”）[0]。文件[0]；
var formData=new formData（）；
formData.append（“文件1”，文件）；
$.ajax（{url:'http://testarea.local/UploadWithProgressBar1/file_upload_parser.php',
方法：“POST”，
键入：“POST”，
数据：formData，
contentType:false，
processData:false，
xhr:function（）
{
var xhr=new window.XMLHttpRequest（）；
xhr.upload.addEventListener（“进度”，
上传ProgressHandler，
假的
);
xhr.addEventListener（“加载”，loadHandler，false）；
xhr.addEventListener（“错误”，errorHandler，false）；
xhr.addEventListener（“中止”，abortHandler，false）；
返回xhr；
}
}
);
}
);

这些文档中的要点：“……或者如果在请求中使用的XMLHttpRequestUpload对象上注册了一个或多个事件侦听器。”我真的很好奇为什么这适用于JQuery，而不是FormData和XMLHttpRequest的正常使用。我真的很好奇为什么如果这真的有效，它会被否决。你和OP都有

xhr.upload.addEventListener（“progress”，…

行，这是规范中为触发飞行前选项检查而调用的内容之一。如果不在服务器上修复404，您的代码肯定无法正常工作。必须解决选项404。re：这解决了404问题，但您一定要设置访问控制允许标头，以便浏览器能够正常运行允许后续的POST请求。

<script type=“text/javascript”>
  function uploadProgressHandler(event)
  {
    $("#loaded_n_total").html("Uploaded "+event.loaded+" bytes of "+event.total);
    var percent = (event.loaded / event.total) * 100;
    var progress = Math.round(percent);
    $("#uploadProgressBar").html(progress + " percent na ang progress");
    $("#uploadProgressBar").css("width", progress + "%");
    $("#status").html(progress +"% uploaded... please wait");
  }

  function loadHandler(event)
  {
    $("#status").html(event.target.responseText);
    $("#uploadProgressBar").css("width", "0%");
  }

  function errorHandler(event){
    $("#status").html("Upload Failed");
  }

  function abortHandler(event){
    $("#status").html("Upload Aborted");
  }

  $("#uploadFile").click(function(event)
                         {
                           event.preventDefault();
                           var file = $("#fileUpload")[0].files[0];
                           var formData = new FormData();
                           formData.append("file1", file);

                           $.ajax({url: 'http://testarea.local/UploadWithProgressBar1/file_upload_parser.php',
                                   method: 'POST',
                                   type: 'POST',
                                   data: formData,
                                   contentType: false,
                                   processData: false,
                                   xhr: function()
                                        {
                                          var xhr = new window.XMLHttpRequest();
                                          xhr.upload.addEventListener("progress",
                                                                      uploadProgressHandler,
                                                                      false
                                                                     );
                                          xhr.addEventListener("load", loadHandler, false);
                                          xhr.addEventListener("error", errorHandler, false);
                                          xhr.addEventListener("abort", abortHandler, false);

                                          return xhr;
                                        }
                                  }
                                 );
                         }
                        );
</script>