Javascript serviceworker：处理和重新发送请求正文

Question

我想使用 Javascript serviceworker 来记录传出请求。我目前的做法是这样的：

self.addEventListener('fetch', function(event) {

    var req = new Request("https://example.com?url=" + encodeURI(event.request.url), {
        method: event.request.method,
        headers: event.request.headers,
        body: event.request.body
    });

    fetch(req);
});

这适用于 GET 请求，但不适用于 body 的 POST/PUT 请求。我尝试使用body: event.request.body.blob()，但也没有用。

有没有一种简单的方法可以在 serviceworkers 中访问获取的请求的主体并将其重新发送到其他地方？

Answer 1

您可以执行以下操作：

self.addEventListener("fetch", (event) => {
  const requestClone = event.request.clone();

  event.respondWith(
    (async function () {
      const params = await requestClone.json().catch((err) => err);

      if (params instanceof Error) {
        // this is a simple check, but handle errors appropriately
      }

      if (event.request.method === "POST") {
        console.log(`POST request with params: ${params}`);
        // do work here
      }
      return fetch(event.request);
    })()
  );
});

请注意，您必须为 event.request 创建一个克隆，以便能够在其上调用 text 方法，因为请求是一个流并且只能使用一次，所以如果您遇到问题试图获取请求的参数，然后将其用于其他用途。

此外，您可以使用以下任何方法从请求中检索正文，因此请使用适当的方法：

• event.request.arrayBuffer()
• event.request.blob()
• event.request.json()
• event.request.text()
• event.request.formData()

假设上述代码 sn-p 包含在您的 ServiceWorker 文件中，以下示例将为您提供所需的内容：

fetch("https://jsonplaceholder.typicode.com/posts", {
  method: "POST",
  body: JSON.stringify({ title: "foo", body: "bar", userId: 1 }),
  headers: { "Content-Type": `application/json` },
})
  .then((response) => response.json())
  .then((json) => console.log(`fetch response`, json))
  .catch((error) => console.error(`fetch error`, error));

// console logs
//  >> POST request with {"title":"foo","body":"bar","userId":1} (worker.js)
//  >> fetch response {title: "foo", body: "bar", userId: 1, id: 101} (index.js)