Azure静态Web应用未正确加载CSS/JS等页面资源问题咨询

根因说明 #

Azure静态Web应用默认将带尾斜杠和不带尾斜杠的URL判定为两个完全独立的路径：

• 不带尾斜杠的/contacto会优先匹配根目录下的contacto静态文件
• 带尾斜杠的/contacto/才会匹配contacto目录下的index.html
  你遇到的内容不一致、部署更新不生效，本质是两个路径对应了不同版本的部署内容，无斜杠路径命中了旧部署的残留内容或缓存。

解决步骤 #

1. 新增路由配置统一路径规则
   在项目静态资源根目录新建staticwebapp.config.json文件，添加如下配置强制所有路径统一使用尾斜杠：

{
  "trailingSlash": "always",
  "globalHeaders": {
    "Cache-Control": "no-cache, must-revalidate, max-age=0"
  }
}

trailingSlash设为always后，所有不带尾斜杠的请求会自动301重定向到带尾斜杠的版本，从根源避免路径歧义；globalHeaders配置会强制浏览器不缓存静态资源，避免旧缓存干扰内容更新。

2. 清理历史部署残留
   进入Azure门户对应静态Web应用的管理页面，删除所有历史部署记录，避免旧版本内容被意外命中。

3. 重新触发部署
   提交staticwebapp.config.json的修改到GitHub仓库，等待GitHub Action自动完成部署后，用浏览器无痕模式访问验证即可，此时带/不带尾斜杠的路径会自动跳转，加载的均为最新部署的内容。

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