HTTP OPTIONS Preflight Request Download Canceled with pending status in Chrome

Question

I am using Sencha Touch 2.1.0. I am making an HTTP GET call. This is a CORS request. Therefore, it sends a command before the HTTP OPTIONS flight, as expected.

I installed the CORS filter on my server and configured it. Calls from my code went very well until yesterday. Suddenly today he stopped loading data. When I check network calls in Chrome, I see that the OPTIONS method displays as "Load cancel"

Method: OPTIONS
Status text: Download Canceled
Type: pending Initiator: Connection.js: 319

I had a similar problem when I first set up the CORS filter. When I cleared the browser cache, it started working. This time I don’t know why he suddenly stopped working. It does not commit even when I clear the cache and history in the browser.

If I make an exact exact call from HTTPRequestor in Firefox, it works very well. Here is a call. I hid the URL due to privacy.

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

Answer 1

This seems to be a problem due to the latest Google Chrome update. When I try to use the Iron browser, it works.

Answer 2

I had a similar problem in beta versions of Webkit browsers. As it turned out, the Content-Type header is set implicitly for the XMLHttpRequests containing Blobs, so I had to add this to the Access-Control-Allow-Headers on my download server.

See: https://bugs.webkit.org/show_bug.cgi?id=99983

Answer 3

I just solved this problem. The server response header should be set as:

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

You have already done it. I think if the GET or POST method contains an X-Requested-With header, the OPTIONS method will be sent first. The X-Requested-With header is in the XHR header by default. Therefore, we must set 'useDefaultXhrHeader' to false. Ext.data.Store did not support this parameter. Change sdk / src / data / Connection.js, change the default value of useDefaultXhrHeader to false.