OpenAPI-TS 项目中关于流式请求体必须指定duplex参数的解决方案

在开发基于OpenAPI规范的TypeScript客户端时，开发者可能会遇到一个特定的错误："The duplex member must be specified for a request with a streaming body"。这个问题主要出现在使用openapi-fetch库进行POST请求时，特别是在Chrome浏览器环境中。

问题现象

当开发者尝试使用openapi-fetch库发送一个包含简单JSON对象的POST请求时，Chrome浏览器会抛出上述错误。有趣的是，这个问题在Firefox中不会出现，表明这是一个浏览器特定的实现差异。

典型的错误场景如下：

client.POST('/api/endpoint', {
  body: { key: 'value' }
})

技术背景

这个问题的根源在于现代浏览器对Fetch API的实现差异。Chrome在125版本及以后对包含流式请求体的fetch请求实施了更严格的检查，要求必须显式设置duplex参数。

duplex是Fetch API的一个相对较新的选项，它定义了请求体的传输模式。对于流式请求体，必须明确指定duplex: 'half'，以表明这是一个半双工通信（数据只能单向流动）。

解决方案

在openapi-typescript项目的0.10.0版本中，这个问题已经得到修复。解决方案的核心是在内部fetch调用中为流式请求体自动添加duplex: 'half'参数。

对于开发者来说，有几种应对方案：

1. 升级到最新版本：最简单的解决方案是将openapi-fetch升级到0.10.0或更高版本。

2. 手动添加duplex参数：如果暂时无法升级，可以在创建客户端时通过配置添加：

const client = createClient<paths>({
  baseUrl: '/api',
  fetch: (input, init) => {
    if (init?.body && typeof init.body !== 'string') {
      init.duplex = 'half';
    }
    return fetch(input, init);
  }
});

3. 使用字符串化的请求体：另一种变通方法是确保请求体已经是字符串形式：

client.POST('/api/endpoint', {
  body: JSON.stringify({ key: 'value' })
})

技术细节

这个问题的出现揭示了现代Web开发中几个重要的技术点：

1. 浏览器兼容性差异：不同浏览器对Web标准的实现可能存在细微差别，开发者需要特别注意。

2. 流式请求处理：随着Web应用复杂度的提升，流式数据处理变得越来越常见，相关的API也在不断演进。

3. 类型安全与自动化：openapi-fetch这类工具通过OpenAPI规范自动生成类型安全的客户端，大大提高了开发效率，但也需要处理底层API的变化。

最佳实践

为了避免类似问题，建议开发者：

1. 保持依赖库的最新版本
2. 在跨浏览器测试中特别关注API调用
3. 对于关键业务接口，考虑添加适当的错误处理和回退机制
4. 关注Web标准的发展，特别是Fetch API的更新

通过理解这个问题的本质和解决方案，开发者可以更好地构建健壮的Web应用程序，避免因浏览器实现差异导致的意外错误。