Angular 14执行ng serve时proxy代理未创建生效问题

问题复现 #

项目中proxy.conf.json配置如下：

{
    "/family-book-base/*": {
        "target": "http://localhost:8080",
        "secure": false,
        "logLevel": "debug"
    }
}

执行ng serve --proxy-config proxy.conf.json命令启动Angular应用时，服务可正常启动，但配置的代理路径未生效，请求不会转发到8080端口的后端服务。同一份配置在Angular 11版本中可正常运行。

根因 #

Angular 12及以上版本升级了内置的http-proxy-middleware依赖，旧版本中/*的通配规则可以匹配对应路径下所有层级的请求，高版本下该写法仅能匹配路径下一级内容，多级路径、携带查询参数的请求都无法命中代理规则，最终表现为代理完全不工作。

解决步骤 #

• 修改代理配置文件的路径匹配规则，将单星号替换为双星号匹配所有子路径，同时补充changeOrigin配置规避跨域场景下的主机校验问题，修改后的配置示例：

{
    "/family-book-base/**": {
        "target": "http://localhost:8080",
        "secure": false,
        "logLevel": "debug",
        "changeOrigin": true
    }
}

• 按需调整路径转发规则：如果后端接口不需要/family-book-base前缀，可以新增路径重写配置去掉前缀：

"pathRewrite": {"^/family-book-base": ""}

• 完全终止当前ng serve进程，重新执行启动命令加载新配置，不要依赖热更新——代理配置变更不会触发热重载。
• 启动后查看控制台日志，出现[HPM] Proxy created: /family-book-base/** -> http://localhost:8080字样即代表代理规则加载成功。

常见踩坑点：不要把proxy.conf.json文件放在src目录下，必须放在项目根目录（和angular.json同级），否则启动时读取配置也会出现静默失败的情况。

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