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

Question

How can I capture the body of POST request in a Service Worker. I am sending authentication parameters in the POST request, so I want to intercept the fetch request in service worker and show results from IndexDB. Following is the code from my service worker

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);

})

ps: please ignore syntax errors if any.

Answer 1

Since request body is ReadableStream, for the reasons @Mr.Vibe mentions in the above comment it cannot be accesed through event.request.body , One way to access the body is by using await event.request.json() , However one should notice that once the request body is read it cannot be reused as body of a request as it throws an error like This ReadableStream is disturbed (has already been read from), and cannot be used as a body . So its better we clone the request and then access its body as in await event.request.clone().json() , So that later on we could use the original request unharmed.

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