Angular CLI自定义配置下无法添加代理的问题排查

针对你配置/manifest.webmanifest代理到localhost:3090但未生效的问题，可以尝试以下排查和修复步骤：

1. 补充代理配置关键参数 #

在proxy.conf.json中添加changeOrigin和可选的logLevel参数，多数代理失效案例都是因为缺少changeOrigin导致后端服务器拒绝请求：

{
  "/manifest.webmanifest": {
    "target": "http://localhost:3090",
    "secure": false,
    "changeOrigin": true,
    "logLevel": "debug"
  }
}

• changeOrigin: 修改请求的Host头为目标服务器的Host，避免后端因Host校验拒绝请求
• logLevel: 设置为debug后，启动Angular服务时会输出代理相关日志，可直接确认请求是否命中代理规则

2. 确认请求路径的匹配逻辑 #

确保前端发起的请求是**向Angular开发服务器（默认http://localhost:4200）**请求/manifest.webmanifest，代理只会处理经过Angular开发服务器转发的请求，直接访问本地文件或其他地址不会触发代理。

3. 扩展代理规则的匹配范围 #

如果你的manifest.webmanifest请求带有查询参数或路径变体，可使用通配符扩大匹配范围：

{
  "/manifest.webmanifest*": {
    "target": "http://localhost:3090",
    "secure": false,
    "changeOrigin": true
  }
}

通配符*会匹配所有以/manifest.webmanifest开头的请求，包含带参数的情况。

4. 适配Angular CLI版本 #

不同版本的Angular CLI对代理配置的支持略有差异：

• 若使用Angular CLI 14及以上版本，上述配置可直接生效
• 若使用较旧版本，可切换为数组格式的旧规范配置：

[
  {
    "context": ["/manifest.webmanifest"],
    "target": "http://localhost:3090",
    "secure": false,
    "changeOrigin": true
  }
]

5. 重启服务并验证日志 #

修改配置后，完全停止ng serve进程再重新启动，查看控制台输出的debug日志，若出现Proxy created: /manifest.webmanifest -> http://localhost:3090类提示，说明代理规则已正确加载。

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