Firefox中HTTP请求返回200却被Angular误判为错误的原因

问题场景 #

应用内有一个POST接口，从外部服务获取数据，响应耗时10-100秒。在Firefox中，当响应耗时超30秒时：

• 浏览器DevTools显示响应状态码200、内容正常
• Angular应用却触发HttpClient的错误回调
• 其他浏览器无此问题

代码示例：

this._http.post(url, {}).subscribe({
            next: (response) => {
                console.log("Success");
            },
            error: (error) => {
                console.log("Error");
            },
        });

注：_http 是@angular/common中的HttpClient

控制台报错：A ServiceWorker intercepted the request and encountered an unexpected error. ngsw-worker.js

可能的原因 #

• Angular Service Worker的内置超时：Angular的Service Worker（ngsw）内部对请求等待时长有默认限制，当接口响应超过30秒时，ngsw直接判定请求失败，把错误传递给Angular，哪怕实际接口已经返回了正常响应。
• Firefox与ngsw的兼容性差异：Firefox对Service Worker的请求拦截逻辑和Chrome等浏览器不同，在处理长耗时请求时，Firefox的Service Worker可能提前终止等待流程，导致ngsw抛出异常，进而触发HttpClient的错误回调。
• Firefox的网络超时机制冲突：Firefox本身有默认的网络请求超时设置（比如30秒），虽然浏览器最终能捕获到接口响应，但Service Worker在超时触发后已经向应用返回了错误，两者的时序不一致导致问题。
• ngsw缓存策略不匹配：如果这个POST请求被Service Worker的缓存规则命中，而对应的缓存策略（比如freshness或performance）不适合长耗时请求，当响应延迟时，ngsw无法正确处理缓存逻辑，从而抛出错误。

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