代码之家 › 专栏 › 技术社区 › csvan

服务人员:拦截响应

service-worker http google-chrome javascript

csvan · 技术社区 · 3 年前

我知道我可以使用服务人员来拦截传出 fetch 操作,甚至生成对它们的自定义响应,例如。

self.addEventListener('fetch', (event) => {                   
  if (/\.jpg$/.test(event.request.url)) {                          
    event.respondWith(
      fetch('/images/anotherimage.jpg'));                               
  }
});

但是,如果我想拦截对给定 取来 请求,然后再将响应传递回页面?这可行吗?

需要明确的是,我不想以任何方式修改请求本身——我只想访问对它的响应。

0 回复 | 直到 3 年前

Jeff Posnick 3 年前

我假设你的意思是,你想向服务工作者添加逻辑,使其请求资源,然后修改来自网络的响应,从而产生一个传递回页面的响应,该响应是你从网络获得的内容和服务工作者添加的内容的混合。

如果是,答案是肯定的,那么您可以对同源响应和使用CORS时的跨源响应执行此操作。(您不能修改 opaque responses ,这是在不使用CORS的情况下提出跨来源请求时得到的结果。)

以下是一个示例 fetch 响应假想的请求的处理程序 /api 向发出请求时返回JSON的端点 /api ,然后在将响应返回到页面之前向API响应添加附加字段。

async function modifyAPIResponse(request) {
  const apiResponse = await fetch(request);
  const json = await apiResponse.json();
  json.extraField = 'set by fetch handler';

  return new Response(JSON.stringify(json), {
    // Ensure that the Content-Type: and other headers are set.
    headers: apiResponse.headers,
  });
}

self.addEventListener('fetch', (event) => {
  const url = new URL(event.request.url);
  if (url.pathname === '/api') {
    event.respondWith(modifyAPIResponse(event.request));
  }
});

推荐文章

Softly · 单选按钮未按预期取值

1 年前

Jason Owens · 我的html/javascript播放按钮无法播放嵌入的youtube视频

1 年前