Fetching CORS request in service worker

Question

I'm writing a service worker with the purpose of monitoring a website's traffic. I capture the request and the response and send data about it to my backend

I'm trying to avoid monitoring the CORS requests. My logic is something like this (dropped not relevant lines):

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

The problem is that when I have a CORS request and I'm fetching it via the fetch(request), without changing original credentials state, I'm getting:

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'.

I can't send the request without the credentials because my client (the one who's using my service worker) might need it.

I can't return a value other than * in the header simply because I don't own the 3rd party origin server. I can't ask to change their API for my monitoring.

My question - Is there a way to just pass on the request as if it wasn't intercepted by my service worker?

I don't mind ignoring CORS requests since they are not critical for what I'm monitoring.

Answer 1

If you return from the FetchEvent handler synchronously then the browser will proceed to process it as it normally would. So something like:

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

This doesn't really address why you're getting an error calling fetch(evt.request) from the service worker. That should in general work if the normal request would have succeeded.