HTTP OPTIONS Pre-flight request Load Cancelled with pending Status in Chrome

Question

I am using Sencha Touch 2.1.0. I am making a HTTP GET call. It is a CORS request. Hence it is sending Pre-flight HTTP OPTIONS command as expected.

I have installed CORS filter on my server and configured it. The calls from my code were going through very well till yesterday. Suddenly today it stopped loading data. When I check the Network calls in Chrome, I see that the OPTIONS method shows up as "Load cancelled"

Method: OPTIONS
Status Text: "Load cancelled"
Type: pending
Initiator: Connection.js:319

I had a similar issue when I configured CORS filter for the first time. When I cleared browser cache, it started working. This time, I am not sure why it suddenly stopped working. It is not getting fixed even when I clear the cache and history in the browser.

If I make the same exact call from HTTPRequestor in Firefox it works very well. Here is the call. I have masked url due to confidentiality reasons.

OPTIONS http://myurl/rest/items?_dc=1358304888220&page=1&start=0&limit=25 HTTP/1.1
Access-Control-Request-Method: GET
Origin: http://localhost:8080
Access-Control-Request-Headers: accept, origin, x-requested-with

The same exact request gives me a very good response from HTTPRequestor. Here is the result:

OPTIONS http://myurl/rest/items?_dc=1358304888220&page=1&start=0&limit=25
Access-Control-Request-Headers: accept, origin, x-requested-with
Access-Control-Request-Method: GET
Origin: http://localhost:8080


 -- response --
200 OK
Date:  Wed, 16 Jan 2013 03:19:27 GMT

Server:  Apache-Coyote/1.1

Access-Control-Allow-Origin:  http://localhost:8080

Access-Control-Allow-Credentials:  true

Access-Control-Allow-Methods:  HEAD, GET, POST, OPTIONS

Access-Control-Allow-Headers:  X-Requested-With, Origin, Accept, Content-Type

Content-Length:  0

Strict-Transport-Security:  max-age=15768000, includeSubDomains

Keep-Alive:  timeout=15, max=100

Connection:  Keep-Alive

Sencha code in the Store to make this call:

    proxy: {
        type: 'ajax',
        method: 'GET',
        url: 'http://myurl/rest/items',
        withCredentials: true,
        useDefaultXhrHeader: false,
        disableCaching: false,
        headers: {
            "Accept": "application/json"
        },
        failure: function(response) {
            if (response.timedout) {
                Ext.Msg.alert('Timeout', "The server timed out :(");
            } else if (response.aborted) {
                Ext.Msg.alert('Aborted', "Looks like you aborted the request");
            } else {
                Ext.Msg.alert('Bad', "Something went wrong with your request");
            }
        },
        success: function(response){
            Ext.Msg.alert(response.responseText);
        }
    },
    autoLoad: true,

Please help me understand how I can fix this issue.

Answer 1

This seems to be an issue due to the last Google Chrome update. When I try with Iron browser, it works.