Workbox - workbox.cacheableResponse在检查响应头时不工作

Question

我通过检查来自cacheableResponse的响应头实现了工作框的响应。

但是，似乎没有缓存响应中存在x-is-cacheable头的API请求。

以下是我如何实现我的服务人员

const cacheableResponse = new workbox.cacheableResponse.Plugin({
    statuses: [0, 200],
    headers: {
        'x-is-cacheable': true,
    },
});

// APIs
workbox.routing.registerRoute(
  new RegExp('https://my-api-url.here'),
  workbox.strategies.networkFirst({
    cacheName: 'api-cache',
    plugins: [
      cacheableResponse
    ]
  })
);

I可以确认，API响应头有x-is-cacheable: true存在，并返回状态代码200。

如果我删除了headers，那么它就能工作了，但是我需要过滤出我需要缓存的特定API。

有人知道为什么这个解决方案不起作用吗？

Answer 1

因此，我刚刚在Github上发现，我的问题与CORS有些关联，为了使X-Is-Cacheable工作，我还需要在API响应中添加Access-Control-Expose-Headers: X-Is-Cacheable (它可能因代码库不同而有所不同，因此请参考API框架中如何在API中添加响应头)。

参考资料：https://github.com/GoogleChrome/workbox/issues/2051