Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Error when requesting blob object urls through XHR

See original GitHub issue

What is your Scenario?

Using XHR to request object urls of type blob: will make hammerhead error out and thus, the request is not made.

I tracked down the exception to this line which expects reqOpts to have a value in the send wrapper, but no values where defined in the open method wrapper because it is a local object url.

Here is where the request options are supposed to be set (xhr.open). This only happens for http and file domains, not for blob which I think makes sense.

https://github.com/DevExpress/testcafe-hammerhead/blob/a878aefb01e45c3dc58d9d92da6e618cbc494c4c/src/client/sandbox/xhr.ts#L149

And here in xhr.send it tries to retrieve the request options which never fails for regular requests to http urls, but since those never are set for blob: urls, it fails badly. https://github.com/DevExpress/testcafe-hammerhead/blob/a878aefb01e45c3dc58d9d92da6e618cbc494c4c/src/client/sandbox/xhr.ts#L162

What is the Current behavior?

Considering the following snippet:

const blob = new Blob(['this is a text'], { type: 'plain/text' });
const url = URL.createObjectURL(blob);

const xhr = new XMLHttpRequest();

xhr.open('get', url, false);
xhr.addEventListener('load', () => {
    console.log(xhr.responseText);
});

xhr.send(); // <-- this throws an exception: "a is undefined"

Because of the exception, the request is not made.

What is the Expected behavior?

xhr.send(); correctly sends the request and the event listener prints this is a text.

What is your public web site URL?

Your website URL (or attach your complete example):

Your complete app code (or attach your test files):

Screenshots:

Steps to Reproduce:

Go to: …
Execute this command: …
See the error: …

Your Environment details:

node.js version:
browser name and version:
platform and version:
other:

Issue Analytics

State:
Created 2 years ago
Reactions:3
Comments:7 (2 by maintainers)

Top GitHub Comments

2reactions

miherlosevcommented, May 21, 2021

Hi @acostajohn

Thank you for the shared information. I’ve reproduced the issue.

For team Steps to reproduce:

Open the page with the following content:

<html>
	<body>
		<button id="send">Send blob via xhr</button>
		<script>
			var sendBtn = document.getElementById('send');
			
			sendBtn.addEventListener('click', function () {
				const blob = new Blob(['this is a text'], { type: 'plain/text' });
				const url  = URL.createObjectURL(blob);
				const xhr  = new XMLHttpRequest();

				xhr.open('get', url, false);
				
				xhr.addEventListener('load', () => {
					console.log(xhr.responseText);
				});

				xhr.send();
			});
		</script>
	</body>
</html>

in health-monitor and press ‘Send blob via xhr’ button.

the script error will be displayed in the DevTools console tab

1reaction

github-actions[bot]commented, Jan 31, 2022

No updates yet. Once we get any results, we will post them in this thread.

Top Results From Across the Web

Getting BLOB data from XHR request - Stack Overflow

Basically, what I am trying to do here is retrieve an image, and convert it to base64. From reading in the comments here,...

XMLHttpRequest Status of 404 With BLOB URL - CSS-Tricks

However, I keep getting a 404 Not Found error trying to request the BLOB from the BLOB URL.

XMLHttpRequest - Web APIs | MDN

Chrome Edge XMLHttpRequest Full support. Chrome1. Toggle history Full support. Edge12... XMLHttpRequest() constructor Full support. Chrome1. Toggle history Full support. Edge12... abort Full support. Chrome1. Toggle...

412752 - [XHR] Data URL cannot be loaded as a Blob

Issue 412752: [XHR] Data URL cannot be loaded as a Blob ... responseType = "blob" still doesn't work for data URL. Fix URLRequestDataJob...

5 Ways to Make an HTTP Request in Javascript - Bannerbear

Despite its name, XMLHttpRequest does not only retrieve XML but can also be used to retrieve any type of data including HTML, JSON,...