Angular部署Azure后assets目录JSON文件修改延迟问题求助

问题分析 #

本地开发时修改assets/thefile.json刷新页面就能即时生效，但部署到Azure App Service后要等十几分钟才会显示更新内容，而同目录的config.json却能即时生效——核心原因是Azure对该文件设置了较长的缓存策略，或是浏览器、CDN层的缓存机制导致旧文件被复用。

具体解决方法 #

方法1：请求时添加随机参数（最快生效） #

直接在HTTP请求URL后追加时间戳，强制浏览器每次都请求最新文件，绕过缓存：

// 修改请求代码
this.http.get(`${this.jsonLocation}?t=${new Date().getTime()}`).subscribe((res: any) => {
  // 处理返回内容
});

方法2：配置Azure App Service缓存规则 #

根据你使用的App Service类型（Windows/Linux）修改对应配置：

• Windows环境：在wwwroot目录下创建/修改web.config，添加针对thefile.json的缓存禁用规则：

<configuration>
  <location path="assets/thefile.json">
    <system.webServer>
      <staticContent>
        <clientCache cacheControlMode="DisableCache" />
      </staticContent>
    </system.webServer>
  </location>
</configuration>

• Linux环境：在站点根目录创建.nginx.conf文件，添加缓存控制规则：

location ~* /assets/thefile.json {
  add_header Cache-Control "no-cache, no-store, must-revalidate";
  expires 0;
}

方法3：调整Angular构建配置 #

在angular.json的assets配置中，给thefile.json设置不生成缓存摘要，确保部署后文件名不变且缓存策略可控：

"assets": [
  "src/favicon.ico",
  "src/assets",
  {
    "glob": "thefile.json",
    "input": "src/assets/",
    "output": "/assets/",
    "cacheDigest": false
  }
]

方法4：检查CDN缓存（如果有配置） #

如果你的App Service前面配置了Azure CDN，需要：

• 手动清除CDN对应文件的缓存
• 在CDN规则中添加针对assets/thefile.json的缓存策略，设置缓存时间为0或直接禁用缓存

为什么config.json能即时生效？ #

大概率是该文件之前被配置过特殊的缓存规则（比如手动设置过缓存头），或是文件名在Azure的默认缓存策略中被排除，导致每次请求都会拉取最新内容。

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