Does the CORS option in Ext.data.Connection v4.0.7 actually work?

[jep]

Is anyone other than mitchell getting it to work with 4.1.1? I'm using 4.1.1a and it's still behaving problematically. But I could just be doing something wrong.

[jep]

Just to make sure it wasn't my own fault, I used geron's example above. Same result as before. The XMLHttpRequest succeeds while the Ext.Ajax.request fails. Error in Chrome is "XMLHttpRequest cannot load (my url here). Request header field X-Requested-With is not allowed by Access-Control-Allow-Headers."

[jep]

Actually, I did manage to convince it to work using something someone posted in another thread. Again, geron's example, with my addition:

Ext.Ajax.useDefaultXhrHeader = false; // without this it fails

Ext.Ajax.request({
url: urlx,
method: 'GET',
cors: true, // this is actually still ignored
success: function(response) {
console.log('ExtJS.Ajax, cross domain request: success!');
},
failure: function(response) {
console.log('ExtJS.Ajax, cross domain request: failure!');
}
});

Without that first (undocumented) useDefaultXhrHeader setting, it fails. I think some of the cross-origin stuff Ext is trying to do just gets in the way. That's also how it seems when I turn on Fiddler (a logging proxy) and look at the request from Ext.Ajax vs XMLHR.

I also find that the cors:true does nothing and it works equally well with cors:false.

[fujy]

I'm using Ext JS Ext JS 4.1.1, and CORS doesn't ever work on IE 8

Also on Firefox and Chrome, the next two lines of code doesn't affect anything.

 Ext.Ajax.cors = true;

or

 Ext.data.Connection.cors    = true;

CORS only work on Firefox or Chrome using ONLY the line below ( before Ext.Ajax.request() method call):

 Ext.Ajax.useDefaultXhrHeader = false;

[mitchellsimoens]

When I do CORS (yes, IE9 be older won't work) all I do is add the two headers server side and things will work without setting anything in JavaScript.

[fujy]

I have written some code that works for me in IE9 (a simple get and post request) but might not be complete. It certainly hasn't been tested as much as it needs to be on enough scenarios (but has been tested more then once!).

Ext.override(Ext.data.Connection, {
    .
    .
    createResponse : function(request) {
        var xhr = request.xhr,
            headers = {},
            // IE's XDomainRequest has no method getAllResponseHeaders. Thanks Microsoft - no really thanks.
            lines = xhr.getAllResponseHeaders !== undefined ? xhr.getAllResponseHeaders().replace(/\r\n/g, '\n').split('\n') : '',
            count = lines.length,
            line, index, key, value, response;
            .
            .
    }
});

Bottom line is that XDomainRequest sucks and, by association, so does Microsoft.

Hello rstuart,

I have used your code and It works fine for me to use CORS on IE8
but I have to add both below lines not only the second

Ext.Ajax.cors = true;
Ext.Ajax.useDefaultXhrHeader = false;

If I used only the second, IE8 fires Access is denied Error

However when i tested it on Firefox and Chrome it, it didn't work, you just have a little bug in your code, you forgot to add "()" on calling getAllResponseHeaders() method.

[lenny87]

Guys, great effort on the hacks, I have implemented them and got slightly further than I was before.

However, I am still struggling with my system. I need some extra clarification on the CORS option. Looking through the extjs code it says only when CORS is true does it send a XDR otherwise it doesn't.

Essentially, what I'm asking is, does the cor configuration actually help for IE8 in any way or is it just detrimental?

Thanks.

[tsheal]

I too am in the process of getting CORS working with a Sencha Touch app.

CORS is not support in IE < 10, so IE8 or 9 will not work