如何在Angular Universal SSR与SPA中分离端点调用且不泄露SSR端点

核心思路是把SSR专用的本地端点配置完全放在服务器端代码中，前端环境文件仅保留浏览器端用的Cloudflare端点，确保前端打包产物中不会出现任何本地端点信息。

具体实现步骤 #

1. 在Express服务器中注入SSR专用API端点 #

修改Angular Universal的服务器入口文件（通常是server.ts），将本地API端点通过自定义注入令牌传给Angular应用，这个配置仅在服务器端存在，不会被打包到前端：

// server.ts
import { ngExpressEngine } from '@nguniversal/express-engine';
import * as express from 'express';
import { join } from 'path';
import { AppServerModule } from './src/main.server';

const app = express();
const PORT = process.env.PORT || 4000;
const DIST_FOLDER = join(process.cwd(), 'dist/your-project/browser');

// SSR专用API端点（可通过环境变量动态配置，避免硬编码）
const SSR_API_ENDPOINT = process.env.SSR_API_ENDPOINT || 'http://localhost:3000/api';

app.engine('html', ngExpressEngine({
  bootstrap: AppServerModule,
  providers: [
    { provide: 'SSR_API_ENDPOINT', useValue: SSR_API_ENDPOINT }
  ]
}));

app.set('view engine', 'html');
app.set('views', DIST_FOLDER);

// 静态资源托管、API路由等其他配置...
app.listen(PORT, () => {
  console.log(`Node server listening on http://localhost:${PORT}`);
});

2. 改造API服务，动态获取端点 #

在API服务中，通过PLATFORM_ID判断环境：浏览器环境用Cloudflare端点，SSR环境用服务器注入的本地端点，前端代码中不会存在本地端点的硬编码：

// api.service.ts
import { Inject, Injectable, PLATFORM_ID } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { isPlatformBrowser } from '@angular/common';
import { environment } from '../environments/environment';

@Injectable({ providedIn: 'root' })
export class ApiService {
  private readonly apiEndpoint: string;

  constructor(
    private http: HttpClient,
    @Inject(PLATFORM_ID) private platformId: object,
    @Inject('SSR_API_ENDPOINT') private ssrApiEndpoint?: string
  ) {
    // 浏览器环境使用Cloudflare端点，SSR环境使用服务器注入的本地端点
    this.apiEndpoint = isPlatformBrowser(this.platformId)
      ? environment.apiEndpoint
      : this.ssrApiEndpoint || environment.apiEndpoint;
  }

  // 示例请求方法
  fetchData() {
    return this.http.get(`${this.apiEndpoint}/data`);
  }
}

3. 清理前端环境文件 #

环境文件（environment.ts/environment.prod.ts）中仅保留浏览器端使用的Cloudflare端点，删除所有本地端点相关配置：

// environment.prod.ts
export const environment = {
  production: true,
  apiEndpoint: 'https://your-cloudflare-domain.com/api'
};

额外优化建议 #

• 将SSR_API_ENDPOINT配置为服务器环境变量，部署时可根据不同环境（开发/测试/生产）灵活切换，无需修改代码。
• 如果API和Express服务器同进程运行，可直接调用API的业务逻辑函数，跳过HTTP请求，进一步提升SSR性能。

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