POST 请求获取正文的服务工作者获取事件

Question

如何在 Service Worker 中捕获 POST 请求的主体。我在 POST 请求中发送身份验证参数，所以我想拦截 service worker 中的获取请求并显示来自 IndexDB 的结果。以下是我的服务人员的代码

self.addEventListener("fetch", event => {
let cloned = event.request.clone();
console.log(cloned.json()); //<<- This line returns error : TypeError: Failed to execute 'json' on 'Request': body stream is locked
let response =  new Promise((resolve)=>{
  let key='mykey'; //Genereate from body, so read body
  let stored = localforage.getItem(key);
  if(stored){
      resolve(stored);
  }else{
    resolve(fetch(cloned).then(res => res.json()).then(res=>{
         localforage.setItem(key,res);
    }));    
  }
})

event.respondWith(response);

})

p.s : 如果有语法错误，请忽略。

Answer 1

由于请求主体是 ReadableStream，由于@Mr.Vibe 在上面的评论中提到的原因，它不能通过 event.request.body 访问，一种访问主体的方法是使用 await event.request.json() ，但是应该注意，一旦请求主体被读取，它就不能再用作请求主体，因为它会抛出类似 This ReadableStream is disturbed (has already been read from), and cannot be used as a body 的错误。所以我们最好克隆请求，然后像 await event.request.clone().json() 那样访问它的主体，这样以后我们就可以安全地使用原始请求。

self.addEventListener("fetch", async (event) => {
 let clonedBody = await event.request.clone().json();
  ...
})

POST 请求获取正文的服务工作者获取事件

Service worker fetch event for POST request get body

javascript

service-worker