Angular + Chrome：同应用双标签页致HTTP请求冻结排查求助

这问题挺典型的——仅在生产构建部署到Apache时触发，开发环境正常，多标签页导致请求挂起，关闭一个标签页就恢复，结合这些特征，我梳理几个最可能的排查方向：

1. Apache的连接数/KeepAlive配置限制 #

从经验来看，这是最常见的原因之一。Apache默认有并发连接数相关的配置项，比如MaxRequestWorkers、MaxKeepAliveRequests，如果这些参数设置得偏低，当多个标签页同时发起请求时，很容易耗尽允许的并发连接数，导致新请求处于pending状态（甚至连后端都没收到请求，因为连接没建立起来）。

而Angular的ng serve用的是自带的开发服务器，它的连接处理策略和Apache完全不同，不会受到这些限制，所以开发环境没问题。

• 排查建议：打开Apache的httpd.conf（或者对应的虚拟主机配置文件），检查以下参数：
  • MaxRequestWorkers：调整到足够处理多标签页的并发量（比如从默认的256调高到512）
  • MaxKeepAliveRequests：设置一个较大的值（比如1000），避免短时间内耗尽连接
  • 确认KeepAlive设置为On，同时KeepAliveTimeout不要设置得过长（比如10秒左右即可）

2. Angular生产构建的全局服务/拦截器冲突 #

生产构建会开启AOT编译、Tree-Shaking等优化，可能导致你的某些全局服务（比如HTTP拦截器、请求封装服务）在多标签页场景下出现状态异常。比如：

• 你的HTTP拦截器里用了全局的请求队列或者锁机制，多标签页的请求互相阻塞
• 某些服务的单例逻辑在生产环境下出现意外共享（虽然每个标签页是独立的JS上下文，但如果用了localStorage/sessionStorage同步状态，可能引发冲突）

开发环境下这些优化是关闭的，所以不会触发问题。

• 排查建议：
  • 检查自定义HTTP拦截器的代码，看看有没有全局变量或者共享状态（比如请求计数器、串行队列），如果有，改成每个请求独立处理
  • 尝试暂时移除拦截器，重新构建部署，看问题是否消失，逐步定位到有问题的服务

3. Chrome的同源连接数限制 #

Chrome对同一域名的并发连接数有默认限制（通常是6个），如果你的应用每个请求都占用了KeepAlive连接且没有及时释放，多标签页的请求会很快耗尽连接池，导致新请求无法发送到后端。

这里要注意：后端没日志说明请求根本没到达服务器，所以问题出在浏览器和Apache之间的连接建立环节。

• 排查建议：
  • 打开Chrome DevTools的Network面板，查看每个请求的Connections列，看看是不是同一域名的连接数达到了上限
  • 在Apache配置中调整KeepAliveTimeout，缩短连接保持时间，让闲置连接更快释放

4. Apache的SPA重写/代理规则问题 #

如果你的Apache配置了mod_rewrite来处理Angular SPA的路由（比如RewriteRule ^ index.html [L]），或者有反向代理配置，可能规则本身存在缺陷，在多标签页场景下导致请求被意外挂起。比如重写规则没有正确排除API请求，导致API请求被转发到index.html，但浏览器一直在等待响应。

• 排查建议：
  • 检查.htaccess或者Apache配置文件中的重写规则，确保API请求被正确转发（比如添加RewriteCond %{REQUEST_URI} !^/api这样的条件，排除API路径）
  • 如果有代理配置，检查ProxyTimeout设置，避免超时时间过短或过长导致请求阻塞

5. Angular生产优化导致的请求异常 #

生产构建的压缩、混淆等优化可能导致某些代码逻辑异常，比如HTTP请求的头设置错误、请求被意外取消但未释放连接等。比如某些请求在生产环境下没有正确发送，但占用了连接池的位置，导致后续请求无法发起。

• 排查建议：
  • 尝试关闭部分生产优化，比如执行ng build --prod --aot=false，重新部署后看问题是否消失，逐步定位到引发问题的优化项
  • 对比开发环境和生产环境的请求头，检查是否有差异（比如Content-Type、Authorization等），确保生产环境的请求配置正确

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