文章目录

起因

解决方案

1. 在 get 请求的 url 中增加随机标识

2. 请求设置

3. 改为 post 请求

起因

360 浏览器“极速模式”采用 Blink ( Webkit ) 内核，“兼容模式”采用 Trident 内核 ( IE 内核 ) 。因此在请求方式是 get 方式的时候，浏览器会进行识别，如果该 get 请求是第一次请求的话，会从服务器拿数据；如果不是第一次请求的话，浏览器会从缓存中拿到上一次请求的数据。在开发中可能会产生页面数据不同步的问题。

解决方案

1. 在 get 请求的 url 中增加随机标识

这个方法是目前应用比较广泛的一个解决方法，可以在请求后拼接一个随机数，也可以在请求后拼接上当前请求的时间戳。

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'

    }

    // ...

})

关于 Pragma: no-cache

查找资料的过程中发现，很多解决方案都仅仅在 headers 中设置了 Cache-Control: no-cache。但是实际使用中发现，仅仅设置该参数并不能产生效果。

Pragma: no-cache 与 Cache-Control: no-cache 效果一致。强制要求缓存服务器在返回缓存的版本之前将请求提交到源头服务器进行验证。

但由于 Pragma 在 HTTP 响应中的行为没有确切规范，所以不能可靠替代 HTTP/1.1 中通用首部 Cache-Control，尽管在请求中，假如 Cache-Control 不存在的话，它的行为与 Cache-Control: no-cache 一致。建议只在需要兼容 HTTP/1.0 客户端的场合下应用 Pragma 首部。

参考资料：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Pragma

3. 改为 post 请求