如何清除React Native fetch缓存？Expo调试遇旧数据问题

你遇到的问题是典型的HTTP缓存命中导致的，即使添加了Cache-Control请求头，仍可能因为客户端缓存、服务器响应头、Expo调试缓存或CDN等中间层缓存导致旧数据无法更新。以下是针对性的解决办法：

• 给请求URL添加唯一标识
  最直接有效的方式是在请求URL后拼接时间戳或随机字符串，让每次请求的URL都唯一，彻底绕过缓存匹配：

  // 用时间戳作为参数
  const uniqueParam = new Date().getTime();
  const response = await fetch(`${fileName}?t=${uniqueParam}`);
  

  这个方法不需要依赖缓存头的兼容性，无论哪层缓存都会将其视为新请求。

• 修正服务器响应头的缓存配置
  检查服务器返回该文件的响应头，确保没有设置强缓存规则。服务器需要返回：

  Cache-Control: no-cache, no-store, must-revalidate
  Pragma: no-cache
  Expires: 0
  

  即使请求头带了no-cache，如果服务器返回的响应头允许缓存，客户端仍会优先使用本地缓存。

• 彻底清除Expo相关缓存
  除了expo start -c，还可以：

  • 关闭Expo开发服务器，删除项目根目录下的.expo文件夹
  • 在Expo Go应用中，找到对应项目，进入设置选择「Clear Cache」后重新加载
  • 重启Expo开发服务器时加上--clear参数：expo start --clear

• 用Expo FileSystem模块强制跳过缓存
  如果是静态文件（如JSON、文本），可以使用Expo的FileSystem模块来控制缓存行为：

  import * as FileSystem from 'expo-file-system';
  
  const getFreshData = async (fileUrl) => {
    const downloadRes = await FileSystem.downloadAsync(
      fileUrl,
      FileSystem.cacheDirectory + 'temp-data',
      { cache: FileSystem.CacheControl.NoCache }
    );
    return await FileSystem.readAsStringAsync(downloadRes.uri);
  };
  

  FileSystem.CacheControl.NoCache会强制从网络获取最新文件，不使用本地缓存。

• 排查CDN/反向代理缓存
  如果服务器前端部署了CDN或反向代理，即使服务器端清除了缓存，CDN节点可能还保留旧文件。需要登录CDN控制台手动清除对应文件的缓存，或者将该文件的缓存策略设置为「不缓存」。

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