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

Question

I'm trying to create a video uploading progress bar by jquery ajax call from my website to a backend service that is located on same domain, but different port

https://mywebsite.com/upload calling https://mywebsite.com:3000/api/video/upload

Here's my ajax script:

$.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'
});

Calling this ajax, my POST request always turned into OPTIONS

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

When I remove the xhr function, the ajax script works fine. I was able to upload one video, but without progress listener.

My backend is built on node.js. Thanks ahead for any help.

Answer 1

I've founded that my server does not support OPTIONS request, so I add this in my node.js file

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

It works well :)

Answer 2

When sending GET, POST methods cross domain, a "preflighted" requests is first send by OPTIONS method.

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

It looks like you are getting 404 Not Found response. Make sure your request target URI return something such as 200 OK, by allowing OPTIONS method requests to be sent.

Answer 3

uhmmm try something like this: (this is jquery 1.11.x and the php file upload parser is just beside the html file)

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