Question

我想使用Javascript服务工作者记录外发请求。我目前的做法是：

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()，但这也不起作用。

是否有一种简单的方法来访问服务工作人员中获取的请求的正文并将其重新发送到其他地方？

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

假设上述代码段包含在您的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)

Javascript Serviceworker：处理和重新发送请求主体

1 个答案: