fix: xhr request error with blob urls (closes #2634) (#2737)

* Make xhr request work with blob urls (gh2634) * refix Co-authored-by: miherlosev <miherlosev@mail.ru>
DevExpress · Feb 21, 2022 · 72fe9e6 · 72fe9e6
1 parent f76a713
commit 72fe9e6
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 10 deletions.
diff --git a/src/client/sandbox/xhr.ts b/src/client/sandbox/xhr.ts
@@ -32,7 +32,15 @@ export default class XhrSandbox extends SandboxBaseWithDelayedSettings {
         super(waitHammerheadSettings);
     }
 
-    static createNativeXHR () {
+    static setRequestOptions (req: XMLHttpRequest, withCredentials: boolean, args: Parameters<XMLHttpRequest['open']>): void {
+        XhrSandbox.REQUESTS_OPTIONS.set(req, {
+            withCredentials,
+            openArgs: args,
+            headers:  []
+        });
+    }
+
+    static createNativeXHR (): XMLHttpRequest {
         const xhr = new nativeMethods.XMLHttpRequest();
 
         xhr.open                  = nativeMethods.xhrOpen;
@@ -49,7 +57,7 @@ export default class XhrSandbox extends SandboxBaseWithDelayedSettings {
         return xhr;
     }
 
-    static openNativeXhr (xhr, url, isAsync) {
+    private static openNativeXhr (xhr, url, isAsync): void {
         xhr.open('POST', url, isAsync);
         xhr.setRequestHeader(BUILTIN_HEADERS.cacheControl, 'no-cache, no-store, must-revalidate');
     }
@@ -69,7 +77,7 @@ export default class XhrSandbox extends SandboxBaseWithDelayedSettings {
             nativeMethods.xhrSetRequestHeader.apply(xhr, header);
     }
 
-    attach (window) {
+    attach (window): void {
         super.attach(window);
 
         const xhrSandbox          = this;
@@ -132,8 +140,11 @@ export default class XhrSandbox extends SandboxBaseWithDelayedSettings {
         overrideFunction(xmlHttpRequestProto, 'open', function (this: XMLHttpRequest, ...args: Parameters<XMLHttpRequest['open']>) {
             let url = args[1];
 
-            if (getProxyUrl(url) === url)
+            if (getProxyUrl(url) === url) {
+                XhrSandbox.setRequestOptions(this, this.withCredentials, args);
+
                 return void nativeMethods.xhrOpen.apply(this, args);
+            }
 
             if (xhrSandbox.gettingSettingInProgress())
                 return void xhrSandbox.delayUntilGetSettings(() => this.open.apply(this, args));
@@ -146,11 +157,7 @@ export default class XhrSandbox extends SandboxBaseWithDelayedSettings {
 
             args[1] = url;
 
-            XhrSandbox.REQUESTS_OPTIONS.set(this, {
-                withCredentials: this.withCredentials,
-                openArgs:        args,
-                headers:         []
-            });
+            XhrSandbox.setRequestOptions(this, this.withCredentials, args);
         });
 
         overrideFunction(xmlHttpRequestProto, 'send', function (this: XMLHttpRequest, ...args: Parameters<XMLHttpRequest['send']>) {
@@ -159,7 +166,7 @@ export default class XhrSandbox extends SandboxBaseWithDelayedSettings {
 
             const reqOpts = XhrSandbox.REQUESTS_OPTIONS.get(this);
 
-            if (reqOpts.withCredentials !== this.withCredentials)
+            if (reqOpts && reqOpts.withCredentials !== this.withCredentials)
                 XhrSandbox._reopenXhr(this, reqOpts);
 
             xhrSandbox.emit(xhrSandbox.BEFORE_XHR_SEND_EVENT, { xhr: this });

diff --git a/test/client/fixtures/sandbox/xhr-test.js b/test/client/fixtures/sandbox/xhr-test.js
@@ -495,3 +495,20 @@ test('should correctly send headers when the "withCredentials" property is chang
                 'http://' + location.host + '/sessionId!a!1/https://example.com/echo-request-headers/');
         });
 });
+
+test('should handle blob object urls (GH-1397)', function () {
+    return new Promise(function (resolve) {
+        var xhr = new XMLHttpRequest();
+        var blob = new Blob(['this is a text'], { type: 'plain/text' });
+        var url = URL.createObjectURL(blob);
+
+        xhr.open('get', url, false);
+        xhr.addEventListener('load', function () {
+            resolve(xhr);
+        });
+
+        xhr.send();
+    }).then(function (xhr) {
+        strictEqual(xhr.responseText, 'this is a text');
+    });
+});