问题描述
我有一堆REST API,它们以$('textarea[name=ExampleMessageElName]').val('Some Message here');
的身份发送cache-control
public,only-if-cached,max-stale=2419200,max-age=60
确保如果客户端发送相同的API请求,则客户端从缓存中选择响应,而不是将其转发到服务器以获取新的响应。
现在,这对于我们的移动应用程序非常适用,因为它是只读的,可以接受一分钟的数据更新延迟。但是,使用同一组API来添加/删除数据的网站必须是实时的,即始终忽略标头的max-age=60
部分。由于当前不会忽略缓存头,因此所有PUT,PATCH或DELETE请求仅在一分钟后就会反映出更改。
有什么办法可以让我的网站忽略max-age=60
。网页是用普通的JS和HTML编写的。 JS对所有REST请求都使用cache-control
。
解决方法
实施带有时间戳的请求逻辑:
为每个请求附加时间戳。借助下面类似的javascript实用程序方法,该方法会将时间戳记附加到所有请求url,并将exisitng查询参数附加到URL(如果存在)。
private getTimeStampedUrl(url:string){
var timestamp = Date.now();
var timestampedUrl = (url.indexOf('?') == -1) ? url + '?' : url + '&';
timestampedUrl += 'timestamp=' + timestamp;
return timestampedUrl;
}
这会将每个请求视为来自浏览器的新请求,并且缓存将无法正常工作。通常,如果我们发送类似的请求(在此处将其中断,方法是在每个请求上附加唯一的时间戳),则浏览器缓存将起作用。
,您可以通过添加标头来禁用获取中的缓存
var headers = new Headers();
headers.append('pragma','no-cache');
headers.append('cache-control','no-cache');
var init = {
method: 'GET',headers: headers,};
var request = new Request(YOUR_URL);
fetch(request,init)
.....
您还可以使用cache-control: no-store
,它将永远不会存储缓存版本。
或者,您可以在URL中使用动态字符串,它仍将版本存储在浏览器的缓存中,例如
const ms = Date.now();
const data = await fetch(YOUR_URL+"?t="+ms)