Angular 17多项目中配置Proxy及URL路径重写的正确方法

Angular 17 多项目架构的 Proxy 配置分单项目独立配置和全局共用配置两种场景，以下是具体操作步骤：

一、单项目独立配置（仅针对某个子项目生效） #

1. 在目标子项目的根目录（比如 projects/project-a/）下创建 proxy.conf.json 文件，写入转发规则示例：

{
  "/api": {
    "target": "http://localhost:3000",
    "secure": false,
    "pathRewrite": {"^/api": ""},
    "changeOrigin": true
  }
}

• /api：匹配前端发起的以 /api 开头的请求
• target：后端服务的地址
• pathRewrite：重写路径，把请求中的 /api 前缀去掉后转发到后端
• changeOrigin：解决跨域场景下的域名校验问题

2. 打开该子项目的 angular.json 配置，找到 architect > serve > options 节点，添加 proxyConfig 字段指向刚才创建的配置文件：

"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "browserTarget": "project-a:build",
    "proxyConfig": "projects/project-a/proxy.conf.json"
  }
}

3. 启动子项目时执行命令：ng serve project-a，Proxy 规则会自动生效。

二、全局共用配置（所有子项目共享同一规则） #

1. 在项目根目录下创建 proxy.conf.json 文件，写入统一的转发规则（内容同单项目配置示例）。

2. 打开根目录的 angular.json，为每个子项目的 architect > serve > options 都添加 proxyConfig 字段，指向根目录的配置文件：

"proxyConfig": "./proxy.conf.json"

3. 启动任意子项目时，都会自动加载全局 Proxy 规则。

常见问题排查 #

• 若配置后未生效，先检查 proxyConfig 的路径是否正确（相对路径以执行 ng serve 的根目录为基准）；
• 确认后端服务已启动且地址与 target 一致；
• 清除浏览器缓存或使用隐私窗口测试，避免旧请求干扰；
• 若后端使用 HTTPS，需将 secure 设置为 true，并确保证书有效。

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