Angular 17.3：如何让SSR适配proxy.config.json代理配置？

核心问题 #

ng s -o启动的是Webpack开发服务器，它读取angular.json配置的proxy.config.json；而SSR的server.ts是独立的Express服务器，默认不会自动加载这个配置文件，导致两种启动方式的代理规则不一致，进而出现请求返回HTML的问题。

解决方案 #

1. 让SSR的server.ts读取proxy.config.json #

修改server.ts，直接读取项目根目录的proxy.config.json，避免硬编码配置，同时保留自定义的代理回调：

首先在server.ts顶部导入必要模块：

import * as fs from 'fs';
import * as path from 'path';

然后在开发环境的代理配置部分替换为以下代码：

if (!environment.production) {
  // 读取根目录的proxy.config.json
  const proxyConfigPath = path.join(process.cwd(), 'proxy.config.json');
  const proxyConfig = JSON.parse(fs.readFileSync(proxyConfigPath, 'utf-8'));

  // 遍历配置中的每个代理规则
  Object.entries(proxyConfig).forEach(([context, baseOptions]) => {
    // 合并自定义回调与基础配置
    const proxyOptions = {
      ...baseOptions,
      onProxyReq: (proxyReq: ClientRequest, req: IncomingMessage, res: ServerResponse) => {
        console.log('Proxying request:', req.method, req.url);
      },
      onProxyRes: (proxyRes: IncomingMessage, req: IncomingMessage, res: ServerResponse) => {
        let body: Buffer[] = [];
        proxyRes.on('data', (chunk: Buffer) => body.push(chunk));
        proxyRes.on('end', () => {
          const responseBody = Buffer.concat(body).toString();
          console.log('Received response:', proxyRes.statusCode, responseBody);
        });
      }
    };

    server.use(context, createProxyMiddleware(proxyOptions));
  });
}

2. 调整proxy.config.json结构 #

把静态代理配置单独放在proxy.config.json中（JSON不支持函数，所以回调写在server.ts里）：

{
  "/local": {
    "target": "https://tmg-ksa-admin-dev.cloud/",
    "secure": true,
    "changeOrigin": true,
    "logLevel": "debug",
    "timeout": 600000,
    "pathRewrite": {
      "^/local": ""
    }
  }
}

3. 确保ng s加载proxy.config.json #

打开angular.json，找到项目的serve配置，在options中添加proxyConfig字段：

"projects": {
  "your-project-name": {
    "architect": {
      "serve": {
        "options": {
          "proxyConfig": "proxy.config.json",
          // 其他原有配置...
        }
      }
    }
  }
}

验证 #

• 运行ng s -o：Webpack开发服务器会加载proxy.config.json处理前端请求
• 运行npm run serve:ssr:project-name：SSR的Express服务器会读取同一个proxy.config.json，并合并自定义回调，确保服务端渲染时的请求也能正确代理

这样两种启动方式就共用同一套代理规则，不会再出现请求返回HTML的问题。

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