记录一次360浏览器兼容模式下定时刷新(请求接口)的缓存问题

    技术2023-09-11  116

    1.问题产生

    因业务需要需要定时请求接口刷新页面数据,发现在chorme,火狐等浏览器能正常使用,而用360兼容模式打开时,只有第一次加载的数据,后续定时刷新数据不变化。

    2.问题排查

    经查阅资料,发现360 浏览器“极速模式”采用 Blink ( Webkit ) 内核,“兼容模式”采用 Trident 内核 ( IE 内核 ) 。因此在请求方式是 get 方式的时候,浏览器会进行识别,如果该 get 请求是第一次请求的话,会从服务器拿数据;如果不是第一次请求的话,浏览器会从缓存中拿到上一次请求的数据,因此数据无变化。

    3.解决方案:

    3.1、在 get 请求的 url 后面带上时间戳参数,如:

    url: prefix + "/network/equipment?times="+new Date().getTime(),

    3.2、进行请求设置,强制要求缓存服务器在返回缓存的版本之前将请求提交到源头服务器进行验证

    ajax 使用 setRequestHeader 方法,jQuery 中使用 cache: false 设置,axios中设置header。

    // ajax xhr.setRequestHeader("Cache-Control", "no-cache"); xhr.setRequestHeader("Pragma", "no-cache"); // jQuery cache: false 设置 $.ajax({ type: "get", cache: false, url: url, success: function (msg) { } }); // axios const http = axios.create({ // ... headers: { 'Pragma': 'no-cache', 'Cache-Control': 'no-cache' } // ... })

    3.3、将get请求改为post请求

    Processed: 0.013, SQL: 9