I am developing a web application with SvelteKit as my frontend framework. During development, all requests behave normally. However, in production, POST requests that include an attached .xlsx file experience significant delays, sometimes taking over 10 minutes to complete.

Initially, I suspected the reverse proxy between the frontend and backend (introduced in production) was causing the issue. However, upon inspecting the request timing in the browser's developer tools, I noticed that the request is blocked for approximately 5 minutes, followed by a similar delay during the sending phase.

Here are the detailed timings for a POST request that uploads a 64 kB .xlsx file (translated from Spanish):

• Blocking: 5.06 min
• DNS Resolution: 0 ms
• Connecting: 245 ms
• TLS Configuration: 0 ms
• Sending: 5.07 min
• Waiting: -1 ms
• Receiving: 4.34 s

Based on my research, I suspect this might be due to Mozilla's restrictions on concurrent connections to the same server. While it’s possible to adjust browser preferences, this is not a viable solution as I cannot expect my users to modify their browser settings.

Here is some context about the project:

• The entire application is Dockerized.
• The backend uses Django, and there is a reverse proxy between the frontend and backend.
• The frontend is built with SvelteKit, using the Node adapter for deployment.
• Currently, both the backend and frontend are hosted on the same machine, and the application is accessed over the LAN only (for now, it doesn't reach the internet due to ongoing security configurations).

In certain sections of the app, users are required to upload .xlsx files via a file input. If multiple files are needed, I dynamically generate forms using JavaScript and send them one by one, tracking the responses. This is when the excessive request times occur.

Here’s the relevant code for sending the POST requests:

async function requestAsyncTask() {
    for (let i = 0; i < forms.length; i++) {
        forms[i].stage.status = 'pending';
        const form = new FormData();
        form.append('file', forms[i].file[0]);

        const response = await fetch(forms[i].query, {
            method: "POST",
            body: form
        });

        if (response.ok) {
            forms[i].stage.status = 'success';
        } else {
            forms[i].stage.status = 'error';
        }
    }
    ableToClose = true;
}

onMount(() => {
    requestAsyncTask();
});

Important Notes: Even though the project is in production, it is currently used only within a local network (LAN). The problem persists even under these conditions.

I am hoping to eliminate the long blocking and sending times. While the underlying cause may relate to persistent connections held by the browser, I’m unsure how to address this.

I’ve read that the Connection header cannot be manually set in fetch requests. Is there a way to optimize or manage these connections properly?

Any guidance or suggestions are welcome. Let me know if more details are needed.