Angular SSR（Angular Universal）模式下HttpClient请求失败排查

问题描述 #

本地运行两个服务：

• FastAPI后端部署在8000端口，已开启全量CORS配置，提供/lucky接口返回随机数
• Angular 14应用，通过ng serve（CSR客户端渲染）或npm run dev:ssr（SSR服务端渲染）启动，部署在4200端口，用HttpClient调用FastAPI接口

现象 #

• 浏览器访问CSR/SSR模式均正常，页面渲染完成且无报错
• 用curl http://localhost:4200访问SSR模式时，终端打印HttpErrorResponse错误（状态码0），且SSR渲染的页面中luckyNumber显示为初始值-1，说明服务端HttpClient请求失败
• CSR模式下curl访问无报错，返回未渲染的初始HTML

相关代码 #

FastAPI后端（main.py）

from random import randint
from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware

app = FastAPI()

@app.get('/')
def read_root():
    return {'hello': 'world'}

@app.get('/lucky')
def get_lucky_number():
    return {
        'luckyNumber': randint(0, 10)
    }

app.add_middleware(
    CORSMiddleware,
    allow_origins=['*'],
    allow_credentials=True,
    allow_methods=['*'],
    allow_headers=['*']
)

Angular组件（app.component.ts）

import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';

export interface Lucky {
  luckyNumber: number;
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  lucky: Lucky;

  constructor(private readonly http: HttpClient) {
    this.lucky = {
      luckyNumber: -1
    }
  }
  
  ngOnInit(): void {
    this.nextNumber();
  }

  nextNumber(): void {
    this.http.get<Lucky>('http://localhost:8000/lucky')
      .subscribe(
        r => this.lucky = r,
        e => console.error(e)
      )
  }
}

原因分析与解决方案 #

核心原因 #

Angular SSR运行在Node.js服务器环境中：

• 当用curl访问SSR服务时，HttpClient请求是从Node.js进程内部向localhost:8000发起的，和浏览器端请求的环境完全不同
• 硬编码的http://localhost:8000/lucky在Node.js环境中可能因为网络策略、polyfill限制导致请求失败，状态码0通常表示请求未成功建立连接
• CORS配置不影响服务端之间的请求，因此CORS不是问题

解决方案 #

1. 区分客户端/服务端环境，动态配置API地址

修改Angular组件代码，注入PLATFORM_ID判断运行环境，分别配置API地址：

import { HttpClient } from '@angular/common/http';
import { Component, OnInit, Inject, PLATFORM_ID } from '@angular/core';
import { isPlatformServer } from '@angular/common';

export interface Lucky {
  luckyNumber: number;
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  lucky: Lucky;
  private apiBaseUrl: string;

  constructor(
    private readonly http: HttpClient,
    @Inject(PLATFORM_ID) private platformId: Object
  ) {
    this.lucky = {
      luckyNumber: -1
    };
    // 区分服务端/客户端的API地址
    this.apiBaseUrl = isPlatformServer(this.platformId) 
      ? 'http://localhost:8000' // 服务端直接访问FastAPI端口
      : '/api'; // 客户端使用相对路径，配合代理
  }
  
  ngOnInit(): void {
    this.nextNumber();
  }

  nextNumber(): void {
    this.http.get<Lucky>(`${this.apiBaseUrl}/lucky`)
      .subscribe(
        r => this.lucky = r,
        e => console.error(e)
      );
  }
}

2. 配置代理统一请求路径

为了避免环境差异，配置客户端和服务端代理，让前后端请求路径统一：

客户端代理（CSR模式）

创建proxy.conf.json文件：

{
  "/api/*": {
    "target": "http://localhost:8000",
    "secure": false,
    "pathRewrite": {"^/api": ""}
  }
}

启动CSR时使用：ng serve --proxy-config proxy.conf.json

服务端代理（SSR模式）

1. 安装代理依赖：npm install http-proxy-middleware --save
2. 修改Angular Universal生成的server.ts，添加代理中间件：

import { createProxyMiddleware } from 'http-proxy-middleware';

// 在app.use(express.static(...))之后添加以下代码
app.use('/api', createProxyMiddleware({
  target: 'http://localhost:8000',
  changeOrigin: true,
  pathRewrite: {'^/api': ''}
}));

3. 验证Node.js环境的网络连通性

如果以上配置仍无效，可在server.ts中添加测试代码，验证Node.js是否能访问FastAPI服务：

import * as http from 'http';

// 在server.ts的启动代码前添加
http.get('http://localhost:8000/lucky', (res) => {
  let data = '';
  res.on('data', (chunk) => data += chunk);
  res.on('end', () => console.log('FastAPI服务连通性测试:', data));
}).on('error', (err) => console.log('FastAPI连接失败:', err));

如果测试失败，检查端口是否被占用、防火墙是否阻止Node.js访问8000端口。

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