如何通过Angular Universal在服务端而非客户端调用API（Angular 14）

核心思路 #

利用Angular Universal的服务端运行环境特性，直接在服务端代码中发起API请求，将敏感的请求信息（如密钥、私有接口地址）完全保留在服务端，避免客户端浏览器获取到这些内容。

具体实现步骤 #

1. 封装服务端专用请求工具 #

在项目服务端代码目录（如server/）下创建服务端专属的API请求服务，比如server-api.service.ts：

import { Injectable } from '@angular/core';
import * as https from 'https';
import { Observable, from } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class ServerApiService {
  // 敏感配置仅在服务端可见
  private apiBase = 'https://your-private-api-domain.com';
  private apiSecret = process.env.PRIVATE_API_KEY;

  fetchPrivateData(endpoint: string): Observable<any> {
    return from(new Promise((resolve, reject) => {
      const requestOptions = {
        hostname: new URL(this.apiBase).hostname,
        path: endpoint,
        headers: {
          'Authorization': `Bearer ${this.apiSecret}`
        }
      };

      https.get(requestOptions, (response) => {
        let rawData = '';
        response.on('data', (chunk) => rawData += chunk);
        response.on('end', () => resolve(JSON.parse(rawData)));
      }).on('error', (err) => reject(err));
    }));
  }
}

2. 在服务端路由中调用请求并传递数据 #

修改server.ts，在处理SSR路由时调用服务端请求，将获取到的数据注入Angular应用：

import { AppServerModule } from './src/main.server';
import { renderModuleFactory } from '@angular/platform-server';
import { ServerApiService } from './server/server-api.service';

// 保留原有server.ts基础代码

// 针对需要服务端请求的路由做处理
app.get('/private-content', async (req, res) => {
  const apiService = new ServerApiService();
  // 发起服务端请求获取数据
  const privateData = await apiService.fetchPrivateData('/user/private-info').toPromise();

  // 将数据注入应用，供客户端组件使用
  const renderedHtml = await renderModuleFactory(AppServerModule, {
    document: '<app-root></app-root>',
    url: req.url,
    extraProviders: [
      { provide: 'SERVER_FETCHED_DATA', useValue: privateData }
    ]
  });

  res.send(renderedHtml);
});

3. 客户端组件接收服务端数据 #

在对应组件中通过依赖注入获取服务端传递的数据，无需再发起客户端请求：

import { Component, Inject, Optional } from '@angular/core';

@Component({
  selector: 'app-private-content',
  template: `<div class="private-data">{{ privateData | json }}</div>`
})
export class PrivateContentComponent {
  constructor(@Optional() @Inject('SERVER_FETCHED_DATA') public privateData: any) {}
}

关键注意事项 #

• 服务端环境避免使用Angular的HttpClient，优先用Node.js原生http/https模块或axios等服务端兼容的请求库。
• 敏感配置（如API密钥）务必放在服务端环境变量中，不要硬编码到代码里。
• 服务端发起请求不受浏览器CORS限制，但要确保目标API允许服务端IP的访问权限。

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