Azure Front Door配置React SPA后/portal路径静态资源404求助

1. 从前端应用根源修复（推荐） #

这类问题大多是单页应用（SPA）打包时未配置基础路径导致的。如果你的Portal是React、Vue或类似框架开发的：

• React：在package.json中添加"homepage": "/portal/"，重新打包后部署。打包后的静态资源引用会自动带上/portal/前缀，请求路径会变成someafd-uniquename.z01.azurefd.net/portal/static/js/main.235cbe7f.js，直接匹配AFD的/portal/*路由。
• Vue：在vue.config.js中设置publicPath: '/portal/'，重新打包部署。
• 其他框架：找到对应配置项设置应用的基础路径为/portal/，确保静态资源引用路径包含前缀。

2. 调整Azure Front Door URL重写规则（应急方案） #

如果暂时无法重新打包应用，可通过AFD重写规则修正静态资源路径：

• 登录Azure门户，进入你的Front Door资源，找到规则集，创建或编辑关联到目标端点的规则集。
• 添加一条重写规则：
  • 匹配条件：添加路径匹配，匹配类型选「前缀」，值为/static/；额外可添加HTTP Referer匹配，值包含/portal/，避免影响Checkin的静态资源请求。
  • 重写操作：选择「URL重写」，源模式填/static/{*}，目标模式填/portal/static/{*}，勾选「保留未匹配的路径」。
  • 规则优先级：确保这条规则优先级高于其他通用路由规则，避免被覆盖。

3. 验证AFD路由与存储静态网站配置 #

• 检查Portal对应的AFD前端路由：路径为/portal/*，后端路径设置为/{remainingPath}（确保AFD将/portal/xxx转发到存储静态网站的/xxx路径）。
• 确认存储账户静态网站的$web容器中，Portal的静态资源（static/目录）是否正确放置在根目录下，索引文档（如index.html）可正常访问。

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