如何在Service Worker中获取Fetch API POST请求的发送数据？

当然可以获取POST请求的Payload数据，核心要点是克隆请求对象（因为原始请求的body只能被读取一次），再根据请求的Content-Type选择对应的解析方式。

实现代码示例 #

self.addEventListener('fetch', function(e) {
  if(e.request.method === 'POST') {
    // 克隆请求，避免消耗原始请求的body流
    const clonedRequest = e.request.clone();

    // 根据请求的Content-Type选择解析方式
    // 示例：优先解析JSON格式，失败则降级为文本解析
    clonedRequest.json()
      .then(payload => {
        console.log('POST请求JSON Payload:', payload);
      })
      .catch(err => {
        clonedRequest.text()
          .then(textPayload => {
            console.log('POST请求文本Payload:', textPayload);
            // 若为表单格式，可进一步解析：const formData = new URLSearchParams(textPayload)
          })
          .catch(parseErr => {
            console.error('解析Payload失败:', parseErr);
          });
      });
  }
});

关键注意事项 #

• 必须克隆请求：e.request的body是一次性可读流，直接读取会导致后续无法正常转发请求到服务器，克隆后读取副本就不会影响原始请求的处理。
• 匹配Content-Type解析：
  • JSON格式（application/json）：用.json()解析
  • 表单格式（application/x-www-form-urlencoded）：先.text()再用new URLSearchParams()解析
  • 纯文本格式：直接用.text()解析

内容的提问来源于stack exchange，提问作者David Auvray