CODEWITHSUNDEEP
javascriptgoogle-chromehttpfetch-api
Thomas Reichmann
Thomas Reichmann

Reputation: 467

Chrome refuses to use HTTP/2 for fetch upload while using streams

Currently trying to create a simple file upload application, I'm using S3 as the storage and presigned-url to do the upload from the client-side.

The application is built using SvelteKit and using Fetch for uploading.

const duplex = { duplex: 'half' };

const response = await fetch(url, {
  method: 'POST',
  body: file.stream(),
  headers: {
  'Content-Type': file.type
  },
  signal: this.abortController?.signal,
  ...duplex
});

When running the app in Firefox, it uploads normally, when attempting to run it on chrome, it gets interrupted with the Quic/Http/2 error net::ERR_H2_OR_QUIC_REQUIRED

Both were running on localhost with Http. I assumed that chrome had some extra protections against running this type of upload through a non SSL channel, so I tried to deploy the app and run it over HTTPS, still it worked on firefox and not on chrome.

Edit:

This seems to be an issue specific to s3 pre signed urls not working nicely with the H2/QUIC requirement from chrome, firefox works because it has more lenient rules regarding this. My conclusion is that for now, I'm going to do the check bellow to still have stream-uploading where it is available, but I'm giving up on getting it to work on chrome.

Quick code snippet showing how to verify if the browser will allow uploading with Fetch-stream to "less secure" urls

// Decide if we are going to upload using stream or normal arrayBuffer
if (navigator.connection?.effectiveType === '4g') {
    opt.duplex = 'half';
    opt.body = file.stream();
} else {
    opt.body = file;
}

Upvotes: 3

Views: 778

Answers (2)

The Bisto Kid
The Bisto Kid

Reputation: 47

I has this same issue whilst having a webpage fail to load lots of images ( >25) of around 100kb each. Some rendered and some had this stream error. So not the same as the user above but others may have had what I experienced.

The solution was to put loading="lazy" on each img tag. And all images rendered successfully with no noticeable delay in loading.

<img src="filename" loading="lazy" height="180" width="245"/>

Upvotes: 0

Dhanan jaya kumar
Dhanan jaya kumar

Reputation: 25

It's simple as you go, Use HTTPS url instead of HTTP url.

Upvotes: -1

Related Questions