xdomainrequest support

[charris]

I'm not sure if this is relevant, but if you look at the source for Connection.request you'll see that it only tries to use a cross-domain request for IE 8+:

if ((options.cors === true || me.cors === true) && Ext.isIE && Ext.ieVersion >= 8) {    
    xhr = new XDomainRequest();
} else {
    xhr = this.getXhrInstance();
}

[basememara]

Thanks but I need this piece of code added for Ext.Loader.require:

        /**
         * Load a script file, supports both asynchronous and synchronous approaches
         *
         * @param {String} url
         * @param {Function} onLoad
         * @param {Object} scope
         * @param {Boolean} synchronous
         * @private
         */
        loadScriptFile: function(url, onLoad, onError, scope, synchronous) {
            var me = this,
                noCacheUrl = url + (this.getConfig('disableCaching') ? ('?' + this.getConfig('disableCachingParam') + '=' + Ext.Date.now()) : ''),
                fileName = url.split('/').pop(),
                isCrossOriginRestricted = false,
                xhr, status, onScriptError;

            scope = scope || this;

            this.isLoading = true;

            if (!synchronous) {
                onScriptError = function() {
                    onError.call(scope, "Failed loading '" + url + "', please verify that the file exists", synchronous);
                };

                if (!Ext.isReady && Ext.onDocumentReady) {
                    Ext.onDocumentReady(function() {
                        me.injectScriptElement(noCacheUrl, onLoad, onScriptError, scope);
                    });
                }
                else {
                    this.injectScriptElement(noCacheUrl, onLoad, onScriptError, scope);
                }
            }
            else {
                if (typeof XMLHttpRequest !== 'undefined') {
                    xhr = new XMLHttpRequest();
                } else {
                    xhr = new ActiveXObject('Microsoft.XMLHTTP');
                }

                try {
                    xhr.open('GET', noCacheUrl, false);
                    xhr.send(null);
                } catch (e) {
                    isCrossOriginRestricted = true;
                }

                status = (xhr.status === 1223) ? 204 : xhr.status;

                if (!isCrossOriginRestricted) {
                    isCrossOriginRestricted = (status === 0);
                }

                if (isCrossOriginRestricted
                //<if isNonBrowser>
                && !isPhantomJS
                //</if>
                ) {
                    onError.call(this, "Failed loading synchronously via XHR: '" + url + "'; It's likely that the file is either " +
                                       "being loaded from a different domain or from the local file system whereby cross origin " +
                                       "requests are not allowed due to security reasons. Use asynchronous loading with " +
                                       "Ext.require instead.", synchronous);
                }
                else if (status >= 200 && status < 300
                //<if isNonBrowser>
                || isPhantomJS
                //</if>
                ) {
                    // Firebug friendly, file names are still shown even though they're eval'ed code
                    new Function(xhr.responseText + "\n//@ sourceURL=" + fileName)();

                    onLoad.call(scope);
                }
                else {
                    onError.call(this, "Failed loading synchronously via XHR: '" + url + "'; please " +
                                       "verify that the file exists. " +
                                       "XHR status code: " + status, synchronous);
                }

                // Prevent potential IE memory leak
                xhr = null;
            }
        },

[basememara]

bump

...any chance we can get CORS enabled on Ext.Loader for the 4.1 release?

[basememara]

I tried overriding the Ext.Loader singleton class as below, but no luck. The responseText is coming back blank, but is populated too late in the lifecycle. I am missing something, but I am not sure where

//ENABLE CORS WORKAROUND FOR SCRIPT LOADER
Ext.Loader.cors = true;
Ext.Loader.loadScriptFile = function(url, onLoad, onError, scope, synchronous) {
    var me = this,
        noCacheUrl = url + (this.getConfig('disableCaching') ? ('?' + this.getConfig('disableCachingParam') + '=' + Ext.Date.now()) : ''),
        fileName = url.split('/').pop(),
        isCrossOriginRestricted = false,
        xhr, status, onScriptError;


    scope = scope || this;

    this.isLoading = true;

    if (!synchronous) {
        onScriptError = function() {
            onError.call(scope, "Failed loading '" + url + "', please verify that the file exists", synchronous);
        };

        if (!Ext.isReady && Ext.onDocumentReady) {
            Ext.onDocumentReady(function() {
                me.injectScriptElement(noCacheUrl, onLoad, onScriptError, scope);
            });
        }
        else {
            this.injectScriptElement(noCacheUrl, onLoad, onScriptError, scope);
        }
    }
    else {
        //HANDLE CORS IN IE IF APPLICABLE
        if (this.cors == true && Ext.isIE && Ext.ieVersion >= 8) {    
            xhr = new XDomainRequest();
            xhr.onload = function() { 
                console.log(this.responseText); 
            };
            xhr.onprogress = function() {};
            xhr.onerror = function() {};
            xhr.ontimeout = function() {};
            try {
                xhr.open('GET', noCacheUrl);
                xhr.send(null);
                xhr.status = 200;
            } catch (e) {
                isCrossOriginRestricted = true;
            }
        } else {
            if (typeof XMLHttpRequest !== 'undefined') {
                xhr = new XMLHttpRequest();
            } else {
                xhr = new ActiveXObject('Microsoft.XMLHTTP');
            }
            try {
                xhr.open('GET', noCacheUrl, false);
                xhr.send(null);
            } catch (e) {
                isCrossOriginRestricted = true;
            }
        }

        status = (xhr.status === 1223) ? 204 : xhr.status;

        if (!isCrossOriginRestricted) {
            isCrossOriginRestricted = (status === 0);
        }

        if (isCrossOriginRestricted
        //<if isNonBrowser>
        && !isPhantomJS
        //</if>
        ) {
            onError.call(this, "Failed loading synchronously via XHR: '" + url + "'; It's likely that the file is either " +
                               "being loaded from a different domain or from the local file system whereby cross origin " +
                               "requests are not allowed due to security reasons. Use asynchronous loading with " +
                               "Ext.require instead.", synchronous);
        }
        else if (status >= 200 && status < 300
        //<if isNonBrowser>
        || isPhantomJS
        //</if>
        ) {
            // Firebug friendly, file names are still shown even though they're eval'ed code
            new Function(xhr.responseText + "\n//@ sourceURL=" + fileName)();

            onLoad.call(scope);
        }
        else {
            onError.call(this, "Failed loading synchronously via XHR: '" + url + "'; please " +
                               "verify that the file exists. " +
                               "XHR status code: " + status, synchronous);
        }

        // Prevent potential IE memory leak
        xhr = null;
    }
};

For context, I am trying this so I can embed my Sencha app in remote websites. The remote websites need to do cross-domain requests to dynamically load my app's Javascript files.

[hendricd]

@basememara--

Some important constraints to consider for your IE8+ use case:

Synchronous requests are NOT supported with XDomainRequest.
Protocols must match between domains ( http !== https ), means no access.

[basememara]

@hendricd I think you are SPOT ON!

I needed a synchronous call the way Ext.Loader.loadScriptFile was constructed. I even tried putting the logic for evaluating the remote script in the XDomainRequest's onload, but that fires much later. By the time that fires, the app is trying to make references to the needed classes already.

        if (this.cors == true && Ext.isIE && Ext.ieVersion >= 8) {
                xhr = new XDomainRequest();
            xhr.onload = function() { 
                if (this.responseText != '') {
                    // Firebug friendly, file names are still shown even though they're eval'ed code
                    new Function(this.responseText + "\n//@ sourceURL=" + fileName)();

                    onLoad.call(scope);
                }
            };
            xhr.onprogress = function() { };
            xhr.onerror = function() { };
            xhr.ontimeout = function() { };
            xhr.timeout = 5000;
            try {
                xhr.open('GET', noCacheUrl);
                xhr.send();
            } catch (e) {
                onError.call(this, "Failed loading synchronously via XHR: '" + url + "'; It's likely that the file is either " +
                                   "being loaded from a different domain or from the local file system whereby cross origin " +
                                   "requests are not allowed due to security reasons. Use asynchronous loading with " +
                                   "Ext.require instead.", synchronous);
            }
        } else {
            if (typeof XMLHttpRequest !== 'undefined') {
                xhr = new XMLHttpRequest();
            } else {
                xhr = new ActiveXObject('Microsoft.XMLHTTP');
            }
            try {
                xhr.open('GET', noCacheUrl, false);
                xhr.send(null);
            } catch (e) {
                isCrossOriginRestricted = true;
            }
            
            status = (xhr.status === 1223) ? 204 : xhr.status;

            if (!isCrossOriginRestricted) {
                isCrossOriginRestricted = (status === 0);
            }

            if (isCrossOriginRestricted
            //<if isNonBrowser>
            && !isPhantomJS
            //</if>
            ) {
                onError.call(this, "Failed loading synchronously via XHR: '" + url + "'; It's likely that the file is either " +
                                   "being loaded from a different domain or from the local file system whereby cross origin " +
                                   "requests are not allowed due to security reasons. Use asynchronous loading with " +
                                   "Ext.require instead.", synchronous);
            }
            else if (status >= 200 && status < 300
            //<if isNonBrowser>
            || isPhantomJS
            //</if>
            ) {
                // Firebug friendly, file names are still shown even though they're eval'ed code
                new Function(xhr.responseText + "\n//@ sourceURL=" + fileName)();

                onLoad.call(scope);
            }
            else {
                onError.call(this, "Failed loading synchronously via XHR: '" + url + "'; please " +
                                   "verify that the file exists. " +
                                   "XHR status code: " + status, synchronous);
            }


            // Prevent potential IE memory leak
            xhr = null;

[rstuart]

Just to update everyone, CORS support will not work with any IE browser/XDomainRequest. See this.