本地XAMPP部署PHP应用修改根目录文件后页面不更新的原因及解决咨询

• 浏览器静态资源缓存：默认情况下，JSON、图片这类静态资源会被浏览器自动缓存，只要请求路径完全相同，浏览器会优先读取本地缓存的旧文件，不会向XAMPP服务器发起新请求，因此修改服务端文件后前端拿到的还是旧内容，普通刷新也可能命中缓存。
• 轮询逻辑存在问题：你当前用for循环批量生成setTimeout的写法，只会在页面加载时一次性排好n次定时任务，全部执行完就会停止，无法实现持续的每10秒轮询效果。

• 添加缓存击穿参数：请求静态资源时在URL末尾追加时间戳这类随机查询参数，让每次请求的路径都有差异，浏览器就会跳过缓存请求最新资源，代码可以修改为如下形式：

// 替换原有的for循环+setTimeout逻辑，用setInterval实现持续轮询
setInterval(() => {
    // 追加时间戳参数破坏缓存
    fetch(`json/imagePathsMappingToCodes.json?t=${Date.now()}`)
    .then(resp => resp.json())
    .then(imagePath => {
        console.log(imagePath);
        // 渲染图片时也需要加同样的时间戳参数，示例：
        // const img = new Image()
        // img.src = `${你的图片路径}?t=${Date.now()}`
    })
}, 10000)

• 服务端配置禁用静态资源缓存：在XAMPP站点的JSON、图片存放目录下新建.htaccess文件，添加以下配置让Apache返回资源时携带禁用缓存的响应头：

<FilesMatch "\.(json|jpg|jpeg|png|webp|gif)$">
Header set Cache-Control "no-store, no-cache, must-revalidate, max-age=0"
Header set Pragma "no-cache"
Header set Expires "0"
</FilesMatch>

• 强制刷新验证：修改文件后如果需要立刻验证效果，可以使用强制刷新快捷键（Windows：Ctrl+F5，Mac：Cmd+Shift+R），直接跳过本地缓存拉取服务端最新资源。

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