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

Question

我有一堆 REST API 发送 cache-control 作为 public, only-if-cached, max-stale=2419200, max-age=60

max-age=60 确保如果客户端发送相同的 API 请求，客户端会从缓存中选择响应，而不是将其转发到服务器以获得新响应。

现在，这非常适合我们的移动应用程序，因为它是只读的，并且可以接受一分钟的数据更新延迟。但是，使用同一组 API 来添加/删除数据的网站需要 real-time 即始终忽略 header 的 max-age=60 部分。由于目前缓存 header 未被忽略，所有 PUT、PATCH 或 DELETE 请求仅在一分钟后反映更改。

有什么方法可以让我的网站忽略 cache-control。网页是用纯 JS 和 HTML 编写的。 JS 对所有 REST 请求使用 fetch。

Answer 1

实施时间戳请求逻辑：

为每个请求附加时间戳。借助如下所示的 javascript 实用方法，此方法会将时间戳附加到所有请求 url 以及 URL（如果存在）的现有查询参数。

   private getTimeStampedUrl(url:string){
      var timestamp = Date.now();
      var timestampedUrl = (url.indexOf('?') == -1) ? url + '?' : url + '&';
      timestampedUrl += 'timestamp=' + timestamp;
      return timestampedUrl;
   }

这会将每个请求都视为来自浏览器的新请求，并且缓存将不起作用。通常，如果我们通过向每个请求附加唯一时间戳来发送类似的请求（我们在此处打破），浏览器缓存就会起作用。

Answer 2

您可以通过在 headers

中附加来禁用 fetch 中的缓存

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)

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

How to prevent HTTP caching of REST calls in browser?

javascript

http

http-caching