Firefox AJAX POST w/ FormData Never Completes

问题

I am uploading a file as part of the change event of my input file control via AJAX and FormData. The $form variable is a jQuery reference to my form (if that wasn't obvious).

$.ajax(url, {
    contentType: false,
    data: new FormData($form[0]),
    method: "post",
    processData: false
}).fail(function(xhr, status, error) {
    console.log(xhr.responseText);
    console.log(status);
    console.log(error);
})

This works in IE, FF and Chrome when I test locally. Once the application is deployed to our QA environment it stops working ONLY in FF (50.1.0 64bit). I can see the POST in the network tab, but the circle to the left stays grey as if it's still pending.

FF Developer Tools Screenshot

The request does "fail" and call my function, but there isn't any interesting information provided (console.log output available in screenshot also).

I thought perhaps it could be a CORS issue, but fiddling around in about:config and installing the CORS Everywhere plug-in did not yield a change in results.

Notable differences between local testing and QA testing environments are that the QA environment is a load balanced SSL offloading configuration. The SSL certificate we use is a wildcard meaning it works for any site *.company.com. Testing locally is plain text.

I did try some of the suggestions made here, but to no avail.

The last thing I tried was using Fiddler to see what was happening between FF and the application server. When Fiddler is set to decrypt HTTPS traffic the process starts working (weird). When Fiddler is capturing but NOT decrypting HTTPS traffic it doesn't work (just as if Fiddler wasn't running). This leads me to believe it could be certificate related?

I'm looking for suggestions/ ideas on what could be the issue.

EDIT:

I've done further experimenting and determined that submitting an empty FormData will POST to the server:

$.ajax(url, {
    contentType: false,
    data: new FormData(),
    method: "post",
    processData: false
})

As will a FormData with some garbage text key/ value pair:

var d = new FormData();
d.append("key", "value");
$.ajax(url, {
    contentType: false,
    data: d,
    method: "post",
    processData: false
})

POSTing will also succeed when no file has yet been selected (FormData with empty File).

I have also determined that accessing the application over HTTP instead of HTTPS allows Firefox to start working again (although I still don't understand why). The failing combination seems to be HTTPS + file data. I also confirmed that xhr.status = 0 and xhr.readyState = 0 when the error callback is fired.

Using ProcMon I was able to determine that my request is always leaving Firefox and making it to our load balancer (where SSL is terminated), but never leaving the load balancer (no matching Apache log entry). This same configuration still works for IE and Chrome so I'm uncertain if Firefox is forming the requests in such a way that they are being rejected by the load balancing appliance (Cisco ACE).

回答1:

We've determined that the issue is the CISCO ACE appliance we have SSL terminating/ load balancing our application. Something is mangling the packet data and preventing the request from completing. Here is the article that references the issue and the settings to adjust.

来源：https://stackoverflow.com/questions/41380831/firefox-ajax-post-w-formdata-never-completes

标签

javascript

ajax

firefox

multipartform-data