使用web fetch API与后端复用HTTP连接及跨域CORS请求连接复用问题

结论前置 #

两种场景都可以实现HTTP2/HTTP3连接复用，不需要复杂的代码改造，满足对应条件即可。

核心前提条件 #

HTTP2的连接复用本身不限制同域名，只要满足以下要求，浏览器就会自动复用已有的连接，不管请求是否跨域：

• 主站域名和跨域目标域名解析到相同的IP和端口
• 服务端部署的TLS证书同时覆盖两个域名（比如使用*.example.com通配符证书，或者证书的SAN字段同时包含example.com和graphql.example.com）
• 服务端已经开启HTTP2/HTTP3支持
• 连接没有因为闲置太久被浏览器或者服务端主动断开（主流浏览器默认会保持HTTP2连接30秒到数分钟不等）

场景(a)：使用window.fetch()发起请求 #

fetch API本身不会干预浏览器的连接池管理逻辑，和<img>、<script>等资源请求共用同一套连接复用规则。只要满足上面的核心前提，所有发往graphql.example.com的fetch请求都会自动复用主站已经建立的HTTP2连接。
你可以通过Chrome DevTools的Network面板验证：任意选中两个发往目标域名的请求，查看详情里的「Connection ID」字段，如果ID一致就说明连接复用已经生效。

场景(b)：向需要CORS校验的其他域名发起请求 #

CORS是浏览器的上层安全校验逻辑，和底层TCP/TLS/HTTP连接的复用完全独立。哪怕是需要发送OPTIONS预检请求的跨域接口，只要满足核心前提，也可以复用已有的HTTP2连接。
如果要进一步降低开销，可以在跨域服务端配置Access-Control-Max-Age响应头，缓存预检请求的校验结果，避免重复发送OPTIONS请求。

Fallback方案 #

如果跨域域名没法满足同IP、证书共用的要求，可以用反向代理方案：在主站example.com下配置专用路径（比如/api/graphql），把该路径的所有请求转发到graphql.example.com后端，这样所有请求都是同域的，天然就能复用主站的连接，也不需要额外配置CORS规则。

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