如何借助Angular Universal让Angular应用所有HTTP请求仅由服务器发起？

核心思路：客户端请求全量代理到SSR服务器 #

Angular Universal仅在首次SSR渲染阶段由服务器处理请求，客户端接管后会直接发起API请求。要实现所有请求都由服务器发起，需通过客户端拦截+服务器代理的方式，把客户端的所有HTTP请求转发到SSR服务器，再由服务器代为调用目标API，客户端仅与SSR服务器通信。

具体实现步骤 #

1. 全局HTTP拦截器：拦截客户端请求并转发 #

创建HTTP拦截器，在浏览器环境下将所有请求重定向到SSR服务器的代理接口，服务器环境下直接发起原请求。

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

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

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    // 仅浏览器环境下拦截请求，转发到SSR代理
    if (isPlatformBrowser(this.platformId)) {
      const proxyUrl = `/api/proxy?target=${encodeURIComponent(req.url)}`;
      // 克隆请求，保留原请求的方法、体、头信息
      const proxyReq = req.clone({
        url: proxyUrl,
        body: req.body,
        headers: req.headers
      });
      return next.handle(proxyReq);
    }
    // 服务器环境直接发起原请求
    return next.handle(req);
  }
}

在app.module.ts中注册拦截器：

import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { ServerProxyInterceptor } from './interceptors/server-proxy.interceptor';

@NgModule({
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: ServerProxyInterceptor,
      multi: true
    }
  ]
})
export class AppModule {}

2. SSR服务器端实现代理接口 #

以Angular Universal默认的Express服务器为例，添加代理路由，接收客户端转发的请求，由服务器发起HTTP调用并返回响应。

先安装服务器端请求工具：

npm install axios

修改server.ts添加代理逻辑：

import * as express from 'express';
import axios from 'axios';
const app = express();

// 处理GET请求代理
app.get('/api/proxy', async (req, res) => {
  try {
    const targetUrl = decodeURIComponent(req.query.target as string);
    const response = await axios({
      url: targetUrl,
      method: req.method,
      headers: req.headers
    });
    res.status(response.status).json(response.data);
  } catch (error) {
    res.status(error.response?.status || 500).json(error.response?.data || { message: '代理请求失败' });
  }
});

// 处理POST/PUT等带请求体的代理
app.post('/api/proxy', express.json(), async (req, res) => {
  try {
    const targetUrl = decodeURIComponent(req.query.target as string);
    const response = await axios({
      url: targetUrl,
      method: 'POST',
      headers: req.headers,
      data: req.body
    });
    res.status(response.status).json(response.data);
  } catch (error) {
    res.status(error.response?.status || 500).json(error.response?.data || { message: '代理请求失败' });
  }
});

// 保留原Angular Universal启动逻辑
// ...

3. 配套优化 #

• CORS处理：目标API仅需配置允许SSR服务器的IP/域名访问，无需开放客户端域名，彻底解决跨域问题。
• 请求白名单：可在拦截器中添加逻辑，跳过本地静态资源、mock数据等无需代理的请求。

关于之前方案无效的原因 #

你尝试的方案仅覆盖了SSR首次渲染阶段的请求处理，没有处理客户端接管后的交互请求。上述方案通过全局拦截+服务器代理，确保了所有请求（包括首次渲染和后续交互请求）都由SSR服务器发起，完全符合需求。

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