Laravel server sent events not connecting properly

Question

I'm trying to implement server sent events in a Laravel project. I created an endpoint in the backend that looks like this:

public function stream(Request $request)
    {
        $response = new StreamedResponse(function () use ($request) {
            $i = 0;
            while (true) {
                $i++;
                echo 'data: ' . $i . "\n\n";
                ob_flush();
                flush();
                if (connection_aborted()) {
                    break;
                }
                usleep(20000);
            }
        });
        $response->headers->set('Content-Type', 'text/event-stream');
        $response->headers->set('X-Accel-Buffering', 'no');
        $response->headers->set('Cache-Control', 'no-cache');
        return $response;
    }

The frontend part:

<script>
    console.log("script started");
    const eventSource = new EventSource('/stream');

    eventSource.onmessage = function(event) {
        console.log(event);
    }
</script>

When I run the project with the builtin Laravel webserver the event stream seems to be working correctly and it looks like this in the console of the browser:

The problem is that all the other requests to my backend are blocked. So I tried using nginx and apache webserver. But unfortunately I'm running into a different problem then. The connection does not establish (readyState 0) and approximately every 5 seconds a new request to the /stream endpoint is generated:

I tried updating the nginx configuration as described here: Nginx configuration

and I used other implementations of sse: sse in laravel

I'm running out of ideas why this is not working. For this project websockets and polling are not an alternative. Hopefully someone of you has an idea and can help me with this.