Injecting CORS headers in response, larger requests fail

We’re hosting a lot of audio, video and image files on a CDN (outside of Cloudflare). We’re currently running into an issue where the CDN doesn’t seem to pass on CORS headers correctly. In order to mitigate this issue I’ve set up a Cloudflare worker using the following code:

addEventListener('fetch', event => {
  console.log(event.request);
  event.respondWith(handle(event.request))
})

async function handle(request) {
  if (request.method === "OPTIONS") {
    return handleOptions(request)
  } else if (request.method === "GET") {
    let fetchedFile = await fetch(request);
    let response = new Response(fetchedFile.body, {headers: fetchedFile.headers});
    response.headers.append("Access-Control-Allow-Origin", "*");
    return response
  } else if (request.method === "HEAD" ||
             request.method === "POST"){
    fetch(request)
  } else {
    return new Response(null, {
      status: 405,
      statusText: "Method Not Allowed",
    })
  }
}

// We support the GET, POST, HEAD, and OPTIONS methods from any origin,
// and accept the Content-Type header on requests. These headers must be
// present on all responses to all CORS requests. In practice, this means
// all responses to OPTIONS requests.
const corsHeaders = {
  "Access-Control-Allow-Origin": "*",
  "Access-Control-Allow-Methods": "GET, HEAD, POST, OPTIONS",
  "Access-Control-Allow-Headers": "Content-Type",
}

function handleOptions(request) {
  if (request.headers.get("Origin") !== null &&
      request.headers.get("Access-Control-Request-Method") !== null &&
      request.headers.get("Access-Control-Request-Headers") !== null) {
    // Handle CORS pre-flight request.
    return new Response(null, {
      headers: corsHeaders
    })
  } else {
    // Handle standard OPTIONS request.
    return new Response(null, {
      headers: {
        "Allow": "GET, HEAD, POST, OPTIONS",
      }
    })
  }
}

The problem I’m running into is that the code doesn’t work correctly for larger files. When I use this for smaller files like images or MP3 files, I can see the headers being injected and the file is being served and displayed by the browser.

If I however try to do this with a file larger than ±1.5mb, for example a video file of 6.6mb, strange things start to happen. The requests suddenly gets split into multiple requests of 6.1mb, 6.6mb and 55kb. This seems to confuse the browser (both Chrome and Firefox) and the video will not be played. Firefox gives a message saying “wrong mime type”. The headers are being injected, but because it comes back in seemingly 3 pieces, it won’t play.

When I try the same request using curl however and try to playback the video using VLC, there’s nothing wrong with it.

Does anyone know why this is happening or how to resolve it?