Angular Universal服务器部署报错：Converting circular structure to JSON

这个循环引用JSON的错误是表象，实际根源是服务器端渲染(SSR)时HTTP请求失败——从错误日志里的HttpErrorResponse可以看到，请求https://app.herokuapp.com/editors返回状态0（未知错误），后续错误捕获逻辑尝试序列化包含循环引用的XMLHttpRequest对象才触发了这个报错。以下是针对性解决方案：

核心修复方案 #

1. 修正服务器端HTTP请求的目标地址 #

Angular Universal在SSR时使用Node.js的HTTP客户端，而非浏览器的XMLHttpRequest，因此：

• 如果API和Angular应用部署在同一服务器/集群，改用内部访问地址（比如容器内部IP、相对路径或内部域名），避免直接使用外部HTTPS地址（不要直接请求https://app.herokuapp.com/editors，换成/api/editors并配置代理）
• 检查服务器防火墙、安全组或容器网络配置，确保Node.js进程能访问目标API的端口

2. 修复错误捕获的序列化逻辑 #

代码中可能直接序列化了完整的HttpErrorResponse对象，而该对象包含XMLHttpRequest实例（存在循环引用）。修改错误处理代码，只提取必要字段：

// 错误写法：直接序列化整个error对象
catch(error => {
  console.log(JSON.stringify(error)); // 触发循环引用错误
})

// 正确写法：仅序列化关键错误信息
catch(error => {
  const errorDetails = {
    status: error.status,
    message: error.message,
    requestUrl: error.url
  };
  console.log(JSON.stringify(errorDetails));
})

3. 适配SSR环境的HttpClient拦截器 #

如果项目中使用了HTTP拦截器，确保拦截器不会在服务器端调用浏览器专属API（如window、document），并针对SSR环境调整请求配置：

import { isPlatformServer } from '@angular/common';
import { Inject, PLATFORM_ID } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler } from '@angular/common/http';
import { Observable } from 'rxjs';

export class ApiInterceptor implements HttpInterceptor {
  constructor(@Inject(PLATFORM_ID) private platformId: Object) {}

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    if (isPlatformServer(this.platformId)) {
      // 服务器端请求时，替换为API内部地址
      const internalApiUrl = `http://internal-api-service:3000${request.url}`;
      request = request.clone({ url: internalApiUrl });
    }
    return next.handle(request);
  }
}

4. 检查Heroku部署的网络与CORS配置 #

如果API部署在Heroku：

• 确保Heroku的dyno之间可以正常通信，可通过Heroku内部域名访问API
• 配置API的CORS策略，允许服务器端的Angular应用发起请求（不要仅限制浏览器端的Origin）

内容的提问来源于stack exchange，提问作者Faris Švrakić