Azure App Configuration getConfigurationSetting缓存问题咨询

问题根因 #

你看到的from disk cache不是SDK层面的缓存，是浏览器默认HTTP缓存行为：

• Azure App Configuration数据平面接口默认未返回强缓存控制头，浏览器会自动基于响应的Last-Modified头对相同URL的GET请求做本地磁盘缓存
• 缓存命中时浏览器不会发起真实网络请求，直接读取本地存储的旧配置，所以后台修改功能标记状态后前端拿不到新值
• 之前测试的acceptDateTime参数是服务端侧用来查询历史版本配置的，只要请求URL完全一致，浏览器会直接命中磁盘缓存，根本不会把请求发到服务端，所以这个参数解决不了缓存问题

网络面板中的磁盘缓存请求截图

可行解决方案 #

方案1（生产环境推荐）：不要在浏览器端直连Azure App Configuration #

• 直连AzConfig需要在前端代码中存放访问密钥/连接字符串，存在严重的密钥泄露安全风险
• 正确架构是把配置拉取逻辑放到后端服务：后端使用@azure/app-configuration SDK拉取配置（服务端运行环境无浏览器磁盘缓存问题），再向前端暴露配置查询接口
• 后端给前端的配置接口按需配置缓存策略：要实时生效就加Cache-Control: no-store响应头，允许短延迟就配置几秒的本地缓存即可

方案2（仅开发测试场景使用）：前端直连时强制绕开浏览器缓存 #

如果本地调试阶段临时需要直连，通过自定义SDK请求管道追加随机参数破坏缓存命中条件即可，参考代码：

import { AppConfigurationClient } from "@azure/app-configuration";

const client = new AppConfigurationClient("<你的AzConfig连接字符串>");
// 追加缓存破坏策略
client.pipeline.addPolicy({
  name: "bustBrowserCache",
  sendRequest: async (req, next) => {
    const separator = req.url.includes("?") ? "&" : "?";
    req.url = `${req.url}${separator}_t=${Date.now()}`;
    return next(req);
  }
});

// 后续正常调用getConfigurationSetting等方法即可拿到最新配置

也可以在Angular全局HTTP拦截器里统一处理所有发往*.azconfig.io域名的请求：

• 追加Cache-Control: no-cache、Pragma: no-cache请求头
• 清空If-Modified-Since请求头，强制浏览器回源请求

注意：该方案仅适合本地开发，生产环境绝对不要把AzConfig连接字符串暴露在前端代码中。

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