View Full Version : CORS Request - HTTP OPTIONS Command fails in Chrome with 'Load cancelled' status

16 Jan 2013, 12:18 PM
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"
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. I tried to clear the cache and history in the browser.
If I make the same exact call from HTTPRequestor in Firefox it works very well (hence server configuration seems good). 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.1Access-Control-Request-Method: GETOrigin: http://localhost:8080Access-Control-Request-Headers: accept, origin, x-requested-withThe 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=25Access-Control-Request-Headers: accept, origin, x-requested-withAccess-Control-Request-Method: GETOrigin: http://localhost:8080 -- response --200 OKDate: Wed, 16 Jan 2013 03:19:27 GMTServer: Apache-Coyote/1.1Access-Control-Allow-Origin: http://localhost:8080Access-Control-Allow-Credentials: trueAccess-Control-Allow-Methods: HEAD, GET, POST, OPTIONSAccess-Control-Allow-Headers: X-Requested-With, Origin, Accept, Content-TypeContent-Length: 0Strict-Transport-Security: max-age=15768000, includeSubDomainsKeep-Alive: timeout=15, max=100Connection: Keep-AliveSencha 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.

16 Jan 2013, 3:50 PM
When I deploy this code, it works from the browser on the mobile device with no issues. It does not work from my computer.

17 Feb 2013, 5:19 AM
I think this is the same problem I'm facing in iOS Safari:


19 Feb 2013, 7:07 AM
Hi Veer_Muchandi,

I have the similar problem. Have you managed to resolve that?

I've tried command line option --disable-web-security, but it only seems to skip the OPTIONS request, while the POST request fails anyway.

What's interesting is that when I open the server URL in another tab thereby making the GET request, then the OPTIONS request starts working, until the browser is restarted.

Best regards

19 Feb 2013, 7:10 AM
Also, it seems to me it might be related to that the service is hosted in a staging environment, where the server uses a self-signed certificate.