从Azure Blob获取JSON的GET请求组件渲染时不刷新如何解决？

问题场景 #

你当前的请求代码如下：

const getDatas = () => {
    axios
      .get('https://randomname.blob.core.windows.net/public/data_home_page.json')
      .then(({ data }) => {
        setStats(data)
      })
      .catch((er) => console.log('error'))
}

useEffect(() => {
    getDatas()
}, [])

首次请求能正常获取数据，但组件重新渲染时不会刷新数据，必须清除浏览器缓存才能拿到最新内容。

问题原因 #

1. 浏览器缓存机制：JSON文件属于静态资源，浏览器默认会缓存这类请求的响应。后续请求相同URL时，浏览器直接从本地缓存读取数据，不会向Azure Blob存储发起新请求。
2. 组件执行时机：依赖为空的useEffect仅在组件首次挂载时执行一次，后续组件重新渲染时不会再次触发请求，自然无法获取最新数据。
3. Azure Blob默认缓存策略：Azure Blob存储对公共访问的静态资源，默认会返回带有缓存有效期的响应头，进一步强化了浏览器的缓存行为。

解决方案 #

1. URL添加缓存破击参数

在请求URL末尾添加随机数或时间戳，让每次请求的URL唯一，绕过浏览器缓存：

const getDatas = () => {
    // 添加时间戳参数，确保每次请求URL不同
    const url = 'https://randomname.blob.core.windows.net/public/data_home_page.json?t=' + Date.now();
    axios
      .get(url)
      .then(({ data }) => {
        setStats(data)
      })
      .catch((er) => console.log('error'))
}

2. 设置请求头禁用缓存

通过axios请求头强制浏览器不使用缓存，直接从服务器获取最新数据：

const getDatas = () => {
    axios
      .get('https://randomname.blob.core.windows.net/public/data_home_page.json', {
        headers: {
          'Cache-Control': 'no-cache', // 禁止使用缓存
          'Pragma': 'no-cache' // 兼容旧版浏览器
        }
      })
      .then(({ data }) => {
        setStats(data)
      })
      .catch((er) => console.log('error'))
}

3. 配置Azure Blob存储的缓存策略

从源头上控制缓存行为，在Azure门户中修改Blob的缓存规则：

• 进入Azure存储账户，找到目标Blob容器
• 打开「存储服务属性」→「缓存」选项
• 设置Cache-Control响应头为no-cache或max-age=0，这样所有请求该Blob的客户端都会强制刷新数据

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