cors - 在 Service Worker 中获取 CORS 请求

Question

我正在编写一个服务 worker ，目的是监视网站的流量。我捕获请求和响应并将相关数据发送到我的后端

我试图避免监视 CORS 请求。 我的逻辑是这样的(删除不相关的行):

self.addEventListener("fetch", function (event) {
  event.respondWith(handleRequest(event));
});

const handleRequest = async event => {
  let response;
  let request = event.request.clone();
    if (! isCrossOrigin(event.request)) {  
      response = await fetch(event.request);
      storeData(request, response.clone());
      return response;
    } else {
      console.log(`Dropping request for ${event.request.url}`)
      return fetch(request);
    }
};

问题是，当我有 CORS 请求并且我通过 fetch(request) 获取它时，在不更改原始凭证状态的情况下，我得到:

Access to fetch at 'https://other-domain.com/test-post' from origin
'http://localhost:3000' has been blocked by CORS policy:
The value of the 'Access-Control-Allow-Origin' header in the response
must not be the wildcard '*' when the request's credentials mode is 'include'.

如果没有凭据，我无法发送请求，因为我的客户端(使用我的 Service Worker 的人)可能需要它。

我无法返回 * 以外的值在 header 中只是因为我不拥有第 3 方原始服务器。我不能要求更改他们的 API 以进行监控。

我的问题 - 有没有办法直接传递请求，就好像它没有被我的服务人员拦截一样？

我不介意忽略 CORS 请求，因为它们对于我正在监视的内容并不重要。

Answer 1

如果您从 FetchEvent 处理程序同步返回，则浏览器将继续像平常一样处理它。所以类似:

self.addEventListener("fetch", function (event) {
  if (isCrossOrigin(event.request)) {
    return;
  }
  event.respondWith(handleRequest(event));
});

const handleRequest = async event => {
  let response = await fetch(event.request);
  storeData(request, response.clone());
  return response;
};

这并不能真正解决您从服务工作人员调用 fetch(evt.request) 时遇到错误的原因。如果正常请求成功，那么一般来说应该可以工作。