4

我正在尝试通过 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 构建的。提前感谢您的帮助。

4

3 回答 3

2

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

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

它运作良好:)

于 2013-10-16T18:09:21.093 回答
0

跨域发送 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 之类的内容。

于 2013-10-16T18:04:22.927 回答
-1

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

<script type=“text/javascript”&gt;
  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>
于 2017-08-28T06:40:56.793 回答