Azure应用网关路径路由下Angular应用无法访问Assets目录图片

云原生阿岚

2026-7-31

解决Azure应用网关路径路由下Angular应用Assets资源访问问题

以下是针对你的问题的具体解决方案：

修正构建命令参数
调整base-href参数，确保结尾带有斜杠，与deploy-url保持一致，避免路径解析歧义：
```
ng build --configuration production --base-href "/app1/" --deploy-url "/app1/"
```
新版本Angular中，--deploy-url已被标记为废弃，可仅使用--base-href完成配置：
```
ng build --configuration production --base-href "/app1/"
```
规范组件内图片引用方式
模板或CSS中引用assets资源时，必须使用与应用前缀绑定的路径：
- 模板中使用相对路径：<img src="./assets/images/logo.png">
- 模板中使用带前缀的绝对路径：<img src="/app1/assets/images/logo.png">
- CSS中使用相对路径：background: url('../assets/images/bg.jpg');
  禁止使用不带应用前缀的绝对路径（如/assets/xxx），这类请求会直接指向根路径，无法匹配应用网关的路由规则。
调整Azure应用网关路由规则
将路径规则的匹配模式改为前缀匹配（Prefix match），并将路径设置为/app1/**，而非仅/app1/。这样所有以/app1/开头的请求（包括/app1/assets/下的资源请求）都会被正确路由到app1_pool后端池。如果使用精确匹配，仅会匹配/app1/根路径，子路径请求会被拦截或路由错误。
验证Assets打包结果
检查Angular构建后的dist目录，确认assets文件夹完整复制到了dist/app1（对应你的应用前缀）目录下，且内部文件结构与源码一致。同时确认angular.json中的assets配置正确：
```
"assets": [
  "src/favicon.ico",
  "src/assets"
]
```
排查后端服务器可用性
绕过应用网关，直接访问app1_pool中后端服务器的/app1/assets/xxx路径，确认资源本身可正常访问，排除后端服务器的文件权限或路径配置问题。