在Angular Universal中能否让所有API请求都在服务端发起？

我已为Angular项目集成Angular Universal，希望确保所有POST、GET API请求均从服务端而非客户端发起，请问这在Angular中是否可实现？例如我有一个用于向后端提交数据的表单，当用户提交表单时，我希望对应的POST请求从服务端发起，而非客户端。当前我的提交逻辑代码如下：

onSubmit(){
    this.http.post('https://jsonplaceholder.typicode.com/posts', this.testForm.value)
    .subscribe(res=>{
     //Some response 
    })
  }

可以实现，核心是通过Angular Universal的服务端层做请求转发，让客户端请求先抵达服务端，再由服务端发起实际的API调用。下面是两种落地方案：

1. 配置服务端代理转发 #

• 在Universal服务端目录（server.ts所在位置）创建代理配置逻辑，借助http-proxy-middleware中间件实现请求转发：
  先安装依赖：npm install http-proxy-middleware
• 修改server.ts，注册代理规则：

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

// ... 其他Express服务器初始化代码

// 配置代理，将/api开头的请求转发到目标API
app.use('/api', createProxyMiddleware({
  target: 'https://jsonplaceholder.typicode.com',
  changeOrigin: true,
  pathRewrite: { '^/api': '' } // 去掉请求路径中的/api前缀
}));

• 调整前端请求代码，指向代理路径：

onSubmit(){
    this.http.post('/api/posts', this.testForm.value)
    .subscribe(res=>{
     // 处理响应
    })
  }

此时客户端请求会先发送到Universal服务端，再由服务端转发到目标API，所有请求实际从服务端发出。

2. 创建自定义服务端转发接口 #

• 在server.ts中新增Express路由，作为中间转发层，可额外添加鉴权、日志等逻辑：

import axios from 'axios'; // 也可用Node.js内置http模块

// ... 其他代码

app.post('/submit-form', async (req, res) => {
  try {
    // 服务端代为发起POST请求
    const apiRes = await axios.post('https://jsonplaceholder.typicode.com/posts', req.body);
    res.status(apiRes.status).send(apiRes.data);
  } catch (err) {
    res.status(err.response?.status || 500).send(err.message);
  }
});

• 前端直接调用这个服务端接口：

onSubmit(){
    this.http.post('/submit-form', this.testForm.value)
    .subscribe(res=>{
     // 处理响应
    })
  }

注意：两种方案都要确保Universal服务端有访问目标API的网络权限，避免出现跨域或访问限制问题。

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