JQuery AJAX request fails with CORS error if modifying XHR

I am using JQuery to upload files to a server, and it's working fine. Since some users will be uploading large files, I want to add a progress bar, and this is where things get funky. I've found about 10 different solutions ( including on here ) but none of them work in my scenario.

I am posting to a different origin (and that's a fact I can't change). This works:

 $.ajax({
    url: "xxx",
    type: 'POST',
    data: data,
    cache: false,
    dataType: 'json',
    processData: false, // Don't process the files
    contentType: false, // Set content type to false as jQuery will tell the server its a query string request
    success: function(data, textStatus, jqXHR)
    {
        if(typeof data.error === 'undefined')
        {
            console.log('Success');
        }
        else
        {
            console.log('ERRORS: ' + data.error);
        }
    },
    error: function(jqXHR, textStatus, errorThrown)
    {
        console.log('ERRORS: ' + textStatus);
    }
});

But as soon as I touch the XHR object, such as here to add an onprogress listener:

Can onprogress functionality be added to jQuery.ajax() by using xhrFields?

And my code becomes:

 $.ajax({
    url: "xxx",
    type: 'POST',
    data: data,
    cache: false,
    dataType: 'json',
    processData: false, // Don't process the files
    contentType: false, // Set content type to false as jQuery will tell the server its a query string request
    xhr: function()
    {
      var xhr = new window.XMLHttpRequest();
      xhr.upload.addEventListener("progress", function(evt){
        if (evt.lengthComputable) {
          var percentComplete = evt.loaded / evt.total;
          console.log(percentComplete);
        }
      }, false);
      return xhr;
    },
    success: function(data, textStatus, jqXHR)
    {
        if(typeof data.error === 'undefined')
        {
            console.log('Success');
        }
        else
        {
            console.log('ERRORS: ' + data.error);
        }
    },
    error: function(jqXHR, textStatus, errorThrown)
    {
        console.log('ERRORS: ' + textStatus);
    }
});

I get the following error in the browser:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at xxx. (Reason: CORS header 'Access-Control-Allow-Origin' missing).

Using Firefox to test, but changing isn't really an option, this needs to work on most popular browsers.

So basically, I can post cross-origin and it works. As soon as I want to monitor its progress it fails.

Other ways I've tried:

  • Adding onprogress: to $.ajax()
  • Using XHRFields
  • Various different forms of xhr: function ()

As soon as I touch the XHR object, I get denied by CORS. Just in case you're wondering, the web-server (Apache) is set up like this:

Header set Access-Control-Allow-Origin "*"

Appreciate any input, I've been at this for hours now and can't get the bloody progress to show. Spent more time on that than on the actual application itself.

This is JQuery 1.7.1 - and I can't upgrade it.

Does anyone have any ideas why the different origin would not be allowed if I modify the xhr object?

Cheers

Stefan

Answers


If you are testing it locally , try using localhost in the url instead of 0.0.0.0 , Also please let me know if this works


Need Your Help

Rhino Mock and WPF Window Dialog

wpf unit-testing modal-dialog rhino-mocks

I'm writing Unit-Tests for an OK_Execute Command in an MvvM-Scenario.

Making one view controller listen to another

ios objective-c cocoa-touch oop

So I have two view controllers. One has autocomplete for location search, and all it does is let the user use the google places api to get an address. The other lets the user do a keyword search and