Angular 17 Universal与Express /api/**路由转发失效求助

你之前修改req.headers.host的方法无法实现请求转发——这只是修改了请求头里的host字段，并没有让Express把请求实际转发到目标服务器。日志里的Unexpected token <错误说明请求最终落到了Angular路由上，返回的是HTML页面而非预期的JSON接口数据。

正确做法是用Express的http-proxy-middleware代理中间件实现转发，步骤如下：

1. 安装代理中间件

npm install http-proxy-middleware

2. 在server.ts中配置代理
   找到你定义Express服务器的代码段，添加以下配置：

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

// 配置/api路径的代理转发
server.use('/api', createProxyMiddleware({
  target: 'http://localhost:3000', // 目标服务器地址
  changeOrigin: true, // 修改请求头host为目标服务器地址，避免后端验证问题
  pathRewrite: { '^/api': '' }, // 可选：如果后端接口不带/api前缀，就去掉该前缀；若后端接口带/api则删除此行
}));

参数说明 #

• target：指定要转发到的目标服务器地址
• changeOrigin：必须设为true，否则目标服务器可能因host不匹配拒绝请求
• pathRewrite：根据后端接口路径结构调整，确保转发后的路径符合后端接口要求

配置完成后重启Angular Universal服务器，此时访问http://localhost:4000/api/**的请求会被正确转发到http://localhost:3000对应接口，返回预期的JSON数据。

内容的提问来源于stack exchange，提问作者felix at housecat