如何通过Azure CDN规则引擎配置Angular静态WebApp回退路由

该配置可实现仅当服务端不存在请求对应物理资源时，返回200状态码的index.html内容交由Angular客户端路由处理，不会返回错误404状态码，完全符合单页应用路由规范。 #

前置要求 #

确保你已经将Angular构建产物正确部署到Azure静态托管源（Blob存储/静态Web应用源），且源站已正确绑定到Azure CDN端点，根路径、静态资源（js/css/媒体文件）可正常访问。

规则详细配置 #

进入Azure CDN端点的规则引擎页面，新建一条规则，将规则优先级设为最高（优先级数值最小，避免被其他规则提前拦截），规则名称可自定义为SPA路由回退。

If 匹配条件块（按顺序添加） #

• 第一个匹配条件：选择「请求URL」，开启正则匹配开关，运算符选择「不匹配」，匹配值填 \.\w{2,4}$
  该条件用于过滤所有带明确文件后缀的静态资源请求（如.js/.css/.png/.ico等），这类资源如果不存在返回404属于正常逻辑，不需要触发回退。

  若你的服务存在/api/前缀的后端接口、或其他不需要走客户端路由的路径，可额外新增匹配规则：同样选择「请求URL」，运算符选「不匹配」，正则值填对应路径前缀（如^/api/），避免接口404时被误返回index.html内容。

• 第二个匹配条件：选择「源站响应状态码」，运算符选择「等于」，匹配值填404
  该条件为核心判断逻辑：仅当源站找不到对应物理资源返回404时，才触发后续回退动作，完全不影响已存在资源的正常访问。

Then 动作块配置 #

选择「URL重写」动作，按如下参数配置：

• 源模式：填/
• 重写目标：填/index.html
• 保留未匹配的路径片段：选择「是」
• 重写后的响应状态码：选择200 OK

生效验证与注意事项 #

• 规则保存后需要等待CDN节点同步，微软标准版Azure CDN的规则生效时间通常为10~15分钟，生效前可手动触发一次CDN端点全量缓存清理。
• 建议单独为index.html配置不缓存/短缓存策略，避免Angular版本迭代后用户拉取到旧的入口文件；静态资源（带哈希后缀的js/css文件）可配置长缓存提升加载性能。
• 配置完成后直接访问MyBank.com/Login这类子路径时，浏览器会收到200状态码的index.html响应，Angular路由会正常渲染对应页面，不会出现404错误。

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