Chrome使用Fetch流上传至S3预签名URL时触发net::ERR_H2_OR_QUIC_REQUIRED错误

问题场景 #

我基于SvelteKit开发了一个简易文件上传应用，采用S3作为存储服务，通过预签名URL实现客户端直传，核心上传代码如下：

const duplex = { duplex: 'half' };

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

在Firefox中上传流程完全正常，但Chrome中上传会直接中断，抛出错误net::ERR_H2_OR_QUIC_REQUIRED。最初以为是HTTP localhost环境的限制，部署到HTTPS环境后问题依旧，只有Firefox能正常工作。

问题原因 #

经排查，该问题源于S3预签名URL与Chrome的H2/QUIC协议要求不兼容，Firefox因为协议规则更宽松所以不受影响。

兼容解决方案 #

目前采用根据网络环境动态选择上传方式的方案：在支持的场景使用流上传，Chrome环境下暂时放弃流上传特性，示例代码如下：

// 根据网络环境选择流上传或普通文件上传
if (navigator.connection?.effectiveType === '4g') {
    opt.duplex = 'half';
    opt.body = file.stream();
} else {
    opt.body = file;
}

内容的提问来源于stack exchange，提问作者Thomas Reichmann