跨域请求JSON对象更新后未刷新问题求助

我之前也碰到过一模一样的情况——明明设置了cache: false，但更新后的JSON就是拿不到，大概率是服务器端缓存或者浏览器强缓存在搞怪，给你几个实用的解决思路：

1. 给请求URL添加随机参数（最快速的临时解决办法） #

有时候即使前端设了禁用缓存，服务器或者CDN还是会返回缓存的旧数据。给URL加个时间戳或者随机字符串，让每次请求的地址都不一样，就能绕开缓存：

function getHumans () {
    $.ajax({
        type: "GET",
        crossDomain: true,
        cache: false,
        // 追加时间戳参数，确保每次URL唯一
        url: "https://some.website/file.json?t=" + new Date().getTime(),
        dataType: 'json',
        success: function (data) {
            console.log(data);
        }
    });
};

2. 检查并调整服务器端的缓存响应头 #

如果服务器给JSON文件设置了强缓存头（比如Cache-Control: max-age=86400或者Expires），浏览器会直接用本地缓存，无视前端的cache: false。你需要让后端同事修改JSON文件的缓存策略，比如设置以下响应头：

Cache-Control: no-cache, must-revalidate
Expires: Sat, 26 Jul 1997 05:00:00 GMT

no-cache会让浏览器每次请求都去服务器验证资源是否更新，而不是直接用本地缓存。

3. 显式设置请求头强制禁用缓存 #

有些情况下，cache: false在跨域请求中的表现可能不太稳定，你可以直接在请求头里明确声明不缓存：

function getHumans () {
    $.ajax({
        type: "GET",
        crossDomain: true,
        url: "https://some.website/file.json",
        dataType: 'json',
        headers: {
            'Cache-Control': 'no-cache',
            'Pragma': 'no-cache'
        },
        success: function (data) {
            console.log(data);
        }
    });
};

快速排查小技巧 #

打开浏览器开发者工具（F12）的「Network」标签，查看每次JSON请求的状态码：

• 如果是304 Not Modified：说明服务器认为资源没更新，返回了缓存，这时候要从服务器端缓存策略入手
• 如果是200 OK：但响应内容还是旧的，那大概率是浏览器本地缓存没清，或者URL参数没加对

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