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

Question

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

https://mywebsite.com/upload 打电话给https://mywebsite.com:3000/api/video/upload

这是我的 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

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

当我删除 xhr 函数时，ajax 脚本工作正常。我能够上传一个视频，但没有进度监听器。

我的后端是基于 node.js 构建的。提前感谢您的帮助。

Answer 1

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

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

效果很好:)

Answer 2

当跨域发送 GET、POST 方法时，首先通过 OPTIONS 方法发送“预检”请求。

https://developer.mozilla.org/en-US/docs/HTTP/Access_control_CORS?redirectlocale=en-US&redirectslug=HTTP_access_control#Preflighted_requests

您似乎收到了 404 Not Found 响应。通过允许发送 OPTIONS 方法请求，确保您的请求目标 URI 返回诸如 200 OK 之类的内容。

Answer 3

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

<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>