如何防止浏览器中的REST调用进行HTTP缓存？

如何解决如何防止浏览器中的REST调用进行HTTP缓存？

我有一堆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)