I have a Sencha Touch application calling my web service cross-domain using Ext.Ajax.request. As I have built the web service I've enabled it to access cross-domain requests. However Ext sends an OPTIONS request first as a handshake then a GET request whereas jQuery.ajax just sends a GET request. Due to circumstances outside my control the hosting provider doesn't support OPTIONS requests. At the moment I have resorted to using jQuery for ajax requests and Sencha Touch for the rest of the application. I don't really want to have to load the jQuery library just for this.

Can anyone shed some light on why Ext.Ajax sends an OPTIONS request and is there a way to make it just send a GET?

Thanks

I have a Sencha Touch application calling my web service cross-domain using Ext.Ajax.request. As I have built the web service I've enabled it to access cross-domain requests. However Ext sends an OPTIONS request first as a handshake then a GET request whereas jQuery.ajax just sends a GET request. Due to circumstances outside my control the hosting provider doesn't support OPTIONS requests. At the moment I have resorted to using jQuery for ajax requests and Sencha Touch for the rest of the application. I don't really want to have to load the jQuery library just for this.

Can anyone shed some light on why Ext.Ajax sends an OPTIONS request and is there a way to make it just send a GET?

Thanks

• javascript
• jquery
• ajax
• sencha-touch

• my problem too ! any luck finding the solution ? @CL4NCY – Duke Commented Jun 4, 2012 at 8:47

3 Answers 3

In the Ext.Ajax.request config, set useDefaultXhrHeader to false. This will prevent the extra OPTIONS request.

According to the docs:

Set this to false to not send the default Xhr header (X-Requested-With) with every request. This should be set to false when making CORS (cross-domain) requests.

My experience is that the OPTIONS call disappeared, I got the POST verb I expected.

Set

Ext.Ajax.useDefaultXhrHeader = false

Before

    Ext.Ajax.request({
        url: 'www.yourUrl.com',
        .....
    });

Or you can set with method like this :

Ext.Ajax.setUseDefaultXhrHeader(false);
Ext.Ajax.request({
                    url: "http://yoururl.domain",
                    success: function(response, eOpt) {
                        console.log('success');
                    },
                    failure: function(response, eOpt) {
                        console.log('error');
                    }
                });